Html 在 <div> 内对齐复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1086661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align Checkbox inside a <div>
提问by Marvin
I seem to be having a strange problem wich I cant fully understand.
我似乎遇到了一个我无法完全理解的奇怪问题。
This is my html:
这是我的 html：
<div class="menu">
Por favor seleccione os conteúdos:
<br/>
<br/>
<br/>
Nome:
<input name="Nome" class="checkbox" type="checkbox" value="Nome" checked />
<br/>
<br/>
Data:
<input name="Data" class="checkbox" type="checkbox" value="Data" checked />
<br/>
<br/>
Cliente:
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />
<br/>
<br/>
Observa??es:
<input name="Observa??es" class="checkbox" type="checkbox" value="Observa??es" checked />
</div>
Inside an Html page with nothing else except the default stuff from Dreamweaver, placed inside the body.
在一个 Html 页面中，除了 Dreamweaver 的默认内容外，没有其他任何内容，放置在正文中。
With this css attached:
附上这个css：
@charset "UTF-8";
/* CSS Document */
.menu
{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;
}
.checkbox {
float:right;
}
Now this code renders properly in safari, text on the left and check boxes aligned on the right inside a div.
现在此代码在 safari 中正确呈现，左侧的文本和右侧对齐的复选框在 div 中。
In firefox it does not.
在 Firefox 中它没有。
The checkboxes seem like they dropped a line.
复选框似乎掉了一行。
It seems to be related to a problem i cant understand but If the checkbox comes first like:
它似乎与我无法理解的问题有关，但是如果复选框首先出现，例如：
<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />Cliente:
<br/>
It renders the intended way in Firefox although as expected its not good on safari.
它在 Firefox 中呈现了预期的方式，尽管正如预期的那样，它在 safari 上表现不佳。
I cant seem to find whats causing the line drop.
我似乎无法找到导致线路掉线的原因。
Thank you.
谢谢你。
回答by Emily
Floats only affect code that follows them in the html. Since you have the input after the label, it will be floated right but on a new line. Different browsers render <br>in different ways.
浮动只影响 html 中跟在它们后面的代码。由于您在标签之后有输入，因此它将向右浮动但在新行上。不同的浏览器<br>以不同的方式呈现。
A good cross-browser way to do checkboxes is
一个很好的跨浏览器做复选框的方法是
.cb-row {margin: 10px;clear:both;overflow:hidden;}
.cb-row label {float:left;}
.cb-row input {float:right;}
<div class="menu">
Por favor seleccione os conteúdos:
<div class="cb-row">
<label for="nome">Nome:</label>
<input id="nome" name="Nome" type="checkbox" value="Nome" checked />
</div>
<div class="cb-row">
<label for="data">Data:</label>
<input id="data" name="Data" type="checkbox" value="Data" checked />
</div>
<div class="cb-row">
<label for="cliente">Cliente:</label>
<input id="cliente" name="Cliente" type="checkbox" value="Cliente" checked />
</div>
<div class="cb-row">
<label for="ob">Observa??es:</label>
<input id="ob" name="Observa??es" type="checkbox" value="Observa??es" checked />
</div>
</div>
The label is floated left and the checkbox is floated right. They are contained in a row div that controls the margins between rows. I removed the class=from the input and instead styled the input in .cb-row input
标签向左浮动，复选框向右浮动。它们包含在控制行之间边距的行 div 中。我class=从输入中删除了，而是将输入设置为.cb-row input
An advantage of using label with the for=and input with the matching id=, is that when you click on the label, the checkbox will be selected/unselected.
使用带有for=匹配的标签和输入的优点id=是，当您单击标签时，复选框将被选中/取消选中。
