ブラウザ内の奇数/不規則な浮動小数点CSS要素

Question

私は不規則な見出しを突然表示する静的なサイトを持っています。これは、ページの上部に表形式の選択を含む多くのJavaScriptを含む単一のページです。このサイトは6ヶ月前にうまくいった。今私は12種類のナビゲーションタブの半分に入力要素の原因不明のミスアライメントを見ている：

• 装飾端部の広場に
• ラウンド
• ラウンドブレーステーパー
から
• ラウンド
フラット機体クラスタ

へ210

フォーム内に含まれる見出し：

<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

。 labelとinput要素の高さが異なることに注意してください。これは外観のために行われました。いくつかの組み合わせと要素の長さでは、浮動小数点数はフルトします。

是正措置は、一つの場所にCSSスタイルシートを変更することでした：

.containerLeft label { 
    clear: both;  /* new addition to this element */ 
    float: left; 
    height: 21px; 
    margin: 8px 5px 0 5px; 
} 

代替は<br>要素の代わりに<div style="clear: both"></div>を使用（またはオリオールによってささげ便利なCSSライブラリクラスを使用することです）

Answer 2

これは、浮動小数点を使用するときに起こります。後続のブロックと重なり、ラインボックスを縮小します。

ブロック要素が浮動小数点に隣接しないようにするには、clearを使用します。だから、明らかに問題が素子高さに関係している

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

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