html - 对齐复选框

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

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

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