Question

我有一个静态网站，它突然显示不规则的标题。这是一个包含大量JavaScript的单个页面，包括页面顶部的表格选择。该网站六个月前工作得很好。现在，我在12个不同导航标签的一半上看到输入元素无法解释的错位：

装饰性结束
Round to Tapered
支撑
Round to Square
Round to Flat
机身群集

表格中包含的标题：

 <form id="dte_form">
     <div class="containerLeft">...</div>
     <div class="containerLeft">...</div>
     <div class="containerLeft">
         <label title="Data can.. [hover info]">Tube O.D. (mm): &nbsp;</label>
         <input type="text" id="dteCutTubeOD" value="31.75" size="8">
         <br>
         <label>Amplitude (mm):</label>
         <input type="text" id="dteAmplitude" value="25.4" size="8">
         <br>
         <label># of Cycles:</label>
         <input type="text" id="dteNumOfCycles" value="3" size="8">
         <br>
     </div>
     <div style="clear: both"></div>
     <div class="containerLeft">
         <input type="button"...>
         <input type="button"...>
         <input type="button"...>
         <input type="button"...>
     </div>
 </form>

CSS没什么特别的：

.containerLeft {
    float: left;
    margin: 4px 20px;
}
.containerLeft label {
    float: left;
    height: 21px;
    margin: 8px 5px 0 5px;
}
.containerLeft input[type=text] {
    float: right;
    height: 15px;
    margin: 4px 5px;
    padding-left: 5px;
}

标题应如下所示：

基本上，在div中，我会将标签向左浮动，向右浮动输入元素，添加<br>并重复。我无法弄清楚为什么偶尔元素不能正确排列。我确定我错过了一些愚蠢的东西，但我无法看到它。是什么原因造成了偶尔的错位？ Click here for website.注意。我在Chrome和Firefox中都看到了相同的结果。

Answer 1

这是使用浮动时发生的情况。它们重叠了以下块和缩小线框。

如果要阻止块元素与浮点数相邻，只需使用clear。

＆＃13;

.float {
  float: left;
  width: 50px;
  height: 3em;
  border: 1px solid;
  background: yellow;
}
.normal, .clear {
  height: 2em;
  border: 1px solid;
  background: pink;
}
.clear {
  clear: left;
}

＆＃13;

<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="normal">Normal</div>
<br /><br />
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="clear">Clear</div>

＆＃13;

Answer 2

显然这个问题与元素高度有关。请注意，0.4.0和label元素具有不同的高度。这是为了外观。在某些组合和元素长度中，浮动物体得到了充分的体现。

纠正措施是在一个地方修改CSS样式表：

input

另一种方法是使用.containerLeft label { clear: both; /* new addition to this element */ float: left; height: 21px; margin: 8px 5px 0 5px; }代替<div style="clear: both"></div>元素（或使用Oriol提供的方便的CSS库类）

浏览器中的奇数/不规则浮点CSS元素

2 个答案: