对齐复选框答案

【问题标题】：Align Checkboxes对齐复选框
【发布时间】：2015-07-15 08:15:21
【问题描述】：

我想在我的站点中对齐我的复选框，我在 stackoverflow 上进行了一些搜索，但我找到了一些解决方案，但无法帮助我根据需要对齐复选框。 first solution-question 和 second solution-question。

我的复选框如下图所示...

RED 行是我希望所有复选框所在的位置。

这是我的复选框的代码...

    <label id="Disease">Disease:</label><br />
    <!--emfanizei tis epiloges gia ta diseases me basi auta p exoume sti basi mas -->
    <?php
  $sql = "SELECT name FROM disease";
  $query_resource = mysql_query($sql);
  while( $name = mysql_fetch_assoc($query_resource) ):
?>
    <span><?php echo $name['name']; ?></span>
    <input type="checkbox" name="disease[]" value="<?php echo $name['name']; ?>" /><br />

<?php endwhile; ?>

你能帮帮我吗？

【问题讨论】：

标签： html css checkbox

【解决方案1】：

将以下 CSS 添加到您的网站：

label#Disease ~ span {
  display: inline-block;
  width: 180px;
}

这就是给spans 跟在label#Disease 元素后面的兄弟spans 设置宽度，这会将所有复选框推到右侧。

调整宽度以使其达到所需大小，确保没有文本溢出或其他问题。

【讨论】：

谢谢你工作正常，我会尽快接受你的回答，因为我需要一些时间才能接受答案
@DogFace - 很高兴能帮上忙！

【解决方案2】：

为什么不将输入包装在标签中，然后将它们浮动到右侧？这样做的好处是您使用语义 label 元素而不是 span，并且可以通过单击文本和 input 来切换复选框

input[type=checkbox] {
  vertical-align: middle;
  float: right;
}
label {
  display: block;
  overflow: hidden;
  width: 120px;
}

<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>
<label>Label
  <input type="checkbox" name="disease[]" />
</label>

【讨论】：

感谢您抽出宝贵时间 :) 我会尝试您的解决方案，看看它是否有效，因为我已经接受了其他答案。再次感谢你:)

【解决方案3】：

您可以将text-align:right css 规则设置为复选框的包装器。

或者，您可以像这样将复选框放入表格单元格中：

<table>
  <tbody>
    <tr>
      <td>labelsdfsdf</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>label</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>label</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>labelsdf sdfsdfsdf</td>
      <td><input type="checkbox"></td>
    </tr>
    <tr>
      <td>label</td>
      <td><input type="checkbox"></td>
    </tr>
  </tbody>
</table>

【讨论】：