2012-04-20 4 views
2

他のCSS浮動小数点の問題のIE 7回避策がたくさんありますが、要素にclearfloatというプロパティがある場合、この問題は見つからないため、クリアが正しく機能しません。フローティング要素が適切に消去されないIE 7回避策はありますか?

This jsFiddle illustrates the problem。私は非常に基本的な問題を解決しようとしています。私はラベル/フォームアイテムのペアを持つフォームを持っています。ラベルは左側に、フォーム項目はラベルの右側にある必要があります。次のラベルは次の行に表示されます。この単純なHTMLで:

<fieldset> 
    <label>Label 1:</label> 
    <input type="text" /> 

    <label>Label 2:</label> 
    <input type="text" /> 
</fieldset> 

このCSSは十分なものでなければならない:

label { 
    width: 200px; 
    text-align: right; 
    clear: both; 
    float: left; 
} 

input { 
    float: left; 
} 

しかし、何の代わりに起こってことはある、第2のラベルは、フロートをクリアし、次の行に描画されるが、隣接する入力最初の行にはまだ表示されます。

マークアップを追加する以外にも、この問題の回避策はありますか?

答えて

0

グループを別のdivに囲むと、問題は解決されます。もちろん、あなたは、あまりにも明確である必要はありません。

http://jsfiddle.net/Qh87k/1/

関連する問題