2011-01-25 14 views
21

私はフロートの問題を抱えていましたので、コミュニティが再び私を助けてくれることを願っています。私は新しいウェブフォームhereを持っています。いつものように、それはIE7(または互換性のIE8)以外のすべてでうまく見えます。浮動小数点:IE7の右下に新しい行が表示される

何らかの理由で、一部のコンテナがフォームテキストの下の改行でフォームフィールドで終わっています。 CSSは私の強みではありません。そうしないと、私は確信しています。誰かが私がここで何が欠けているか教えてくれますか?

私は浮動小数点数を追加しようとしました:フォームのテキストに左を入れましたが、それは他の混乱を招いてしまいました。

答えて

75

は小さな変更マークアップにしてみてください(同じ行から)それなしのアイテムの前にフロートのある場所アイテム。それは助けになるはずです。

+3

大きなヒント!喜び。 – orourkedd

+2

これは今日私に役立ちました。ありがとう! –

+2

意味的に正しいわけではありません。それは...ですか? – ciembor

0

テキストのスパンタグを固定幅にし、左に浮かして、対応させたい入力フィールドに対して同じ操作を実行できます。また、フォーム上のspanタグの代わりにlabelタグを使用することをお勧めします。本当の理由はありません。スパンタグを使っているラベルとまったく同じものなのです。

0

あなたがしたいことは、クリアを追加することです:両方とも浮動要素の最後の兄弟として。

だから、のようなもの:

<div style="float:left;"> 
    <!-- children of div here --> 
</div> 
<div style="clear:both;"> 
    <!-- leave empty --> 
</div> 
1

.formTextをフロートさせて、span.requiredをフロートさせ、入力をフロートさせて同じ行に並べることができるようにする必要があります。

マークアップを少し修正します。あなたの<span class="formText">が本当にあるべき<label>例えば

<P class=formRow> 
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label> 
<INPUT id=FirstName class=formTextbox name=FirstName> 
</P> 

とあなたのCSSはこのようなものになるだろう:

.formRow { 
    clear: both; 
} 
    .formRow label { 
    float: left; 
    width: 150px; 
    } 
    .formRow input { 
    float: left; 
    } 
2

私はこれが掲載されたので、長い時間がかかったけど、私はこのために好きな解決策を見つけました。要点は、浮動小数点要素をDOM内の親の最初の要素に移動するためだけにIE7用のCSSで 'expression'タグを使用しています。他のすべてのブラウザでは意味的には正しいでしょうが、IE7では浮動要素を移動するためにDOMを変更します。私の場合は

、私が持っている:プル権利のための私のCSSで

<div> 
    <h1></h1>...<p>any other content...</p> 
    <small class="pull-right"></small> 
</div> 

を、私が使用:

.pull-right { 
    float:right; 
    *zoom: ~"expression(this.runtimeStyle.zoom='1',parentNode.insertBefore(this,parentNode.firstChild))"; 
} 

結果は、IE7が最初の要素であると私<small>を移動させていることです<div>しかし、他のすべてのブラウザはマークアップだけを残します。

これは、すべてのユーザーにとって機能しない可能性があります。技術的には、それはマークアップを修正していますが、IE7のDOMだけであり、javascriptソリューションでもあります。

また、表現のパフォーマンスに問題があるかもしれないことはわかっています(遅いです)。このような浮動小数点数が多いのは理想的ではないかもしれません。私の場合は、うまくいき、意味的に正しいHTMLを保つことができました。

関連する問題