Html 对齐复选框

我想在我的站点中对齐我的复选框，我在stackoverflow上做了一些搜索，发现一些解决方案不能帮助我按照我的需要对齐复选框。这个和那个

我的复选框如下图所示

红色行是我希望所有复选框的位置

这是我的复选框的代码

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

疾病：

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

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

这将为跟随您的
标签#Disease
元素的兄弟
span
s提供一个设置的宽度，这将把所有复选框推到右侧

播放宽度以使其达到所需的大小，确保没有文本溢出或其他问题。
为什么不将输入包装在标签中，然后将其浮动到右侧？这样做的好处是，您使用的是语义
标签
元素，而不是
span
，并且可以通过单击文本和
输入
来切换复选框


输入[类型=复选框]{
垂直对齐：中间对齐；
浮动：对；
}
标签{
显示：块；
溢出：隐藏；
宽度：120px；
}
标签
标签
标签
标签
标签
标签
您可以将
文本对齐：右
css规则设置为复选框的包装

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



标签DFSDF
标签
标签
标签DFSDFSDFDF
标签
谢谢您，效果很好，我会尽快接受您的回答，因为我需要一些时间来接受您的回复answer@DogFace–很高兴能帮忙！谢谢您的时间：）我将尝试您的解决方案，看看它是否有效，因为我已经接受了另一个答案。再次感谢：）