对齐复选框
我想在我的网站中对齐我的复选框，并在stackoverflow上进行了一些搜索，并找到了一些解决方案，无法帮助我按自己的意愿对齐复选框。 第一个解决方案 - 问题和第二个解决方案 - 问题。
我的复选框看起来像下面的图片...
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; ?>
你能帮我吗？
将以下CSS添加到您的网站：
label#Disease ~ span {
display: inline-block;
width: 180px;
}
这是给你的label#Disease元素设置一个宽度的兄弟span ，它将把所有复选框推到右边。
使用宽度播放以获得所需大小，确保没有文本溢出或其他问题。
为什么不将输入包装在标签中，然后将它们浮动到右侧？ 这样做的好处是使用语义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> 您可以将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>上一篇: Align Checkboxes