对齐复选框

Question

我想在我的网站中对齐我的复选框，然后我在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; ?>

你能帮我吗？

Answer 1

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

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

这会给跟随span元素的兄弟label#Disease一个设定的宽度，这会将所有复选框推到右边。

使用宽度进行播放，使其达到您想要的大小，确保您没有文字溢出或其他问题。

Answer 2

为什么不将输入包装在标签中，然后将它们浮动到右侧？您的优势是使用语义label元素而不是span，并且可以通过单击文本和input

来切换复选框

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

或者，您可以将复选框放入表格单元格中，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;