在<div>中对齐Checkbox

Question

我似乎遇到了一个我无法完全理解的奇怪问题.

这是我的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>

在一个Html页面内,除了Dreamweaver中的默认内容之外别无其他内容,放置在正文中.

附上这个css:

@charset "UTF-8";
/* CSS Document */

.menu 

{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;

 }

 .checkbox {

float:right;
}

现在这个代码在safari中正确呈现,左边的文本和div内右边对齐的复选框.

在Firefox中它没有.

复选框看起来像是一行.

它似乎与我无法理解的问题有关,但如果复选框首先出现如下:

<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked  />Cliente:
<br/>

它在Firefox中呈现了预期的方式,尽管如预期的那样它在Safari上并不好.

我似乎无法找到什么导致线下降.

谢谢.

Answer 1

浮点只会影响html中跟随它们的代码.由于您在标签后面有输入,因此它将向右浮动但在新行上.不同的浏览器<br>以不同的方式呈现

一个很好的跨浏览器方式来做复选框

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

标签向左浮动,复选框向右浮动.它们包含在行div中,用于控制行之间的边距.我class=从输入中删除了输入,而是输入了输入.cb-row input

使用带有for=匹配和输入的标签的一个优点id=是,当您单击标签时,将选中/取消选中该复选框.