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=输入的一个好处是，当您点击标签时，将选中/取消选中该复选框。

在<div> </div>中对齐复选框

1 个答案: