对齐复选框

Question

我想在我的站点中对齐我的复选框，我在 Whosebug 上进行了一些搜索，我发现了一些无法帮助我按我的意愿对齐复选框的解决方案。 first solution-question and the 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; ?>

你能帮帮我吗？

Answer 1

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

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

这就是为您的 label#Disease 元素之后的同级 span 设置宽度，这会将所有复选框推向右侧。

调整宽度使其达到您想要的大小，确保没有文字溢出或其他问题。

Answer 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>

Answer 3

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

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

<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>

对齐复选框

Align Checkboxes

html

css

checkbox