フォーム上の浮動ラベルとDivs

Question

私のページにはフォームがあり、左端がすべて一列になるようにすべてのテキストボックスを配置します。

私はFirefoxで正常に動作し、次のコードを、書かれている：IE6で見たときに

<style type="text/css"> 
label { 
    float: left; 
    clear: both; 
    width: 250px; 
    margin-top: 10px; 
} 

input { 
    float: left; 
    margin-top: 10px; 
} 
</style> 



<label>First Name:</label> 
<input type="text" name="fname"> 

<label>Last Name:</label> 
<input type="text" name="lname"> 

<label>Phone Number:</label> 
<input type="text" name="phone"> 

ただし、テキストボックスには、私は彼らがなりたいとラベルが配置されている1行にすべてです。私は時間の問題をソートするためにしようとしていると私が思い付くことができる唯一のことは、フロートをクリアしますので、などの各ラベル/テキストボックスの組み合わせわたってるしきスパンを配置することです：私は、これは知っているが

<label>First Name:</label> 
<input type="text" name="fname"> 

<span style="clear: both;"></span> 

<label>Last Name:</label> 
<input type="text" name="lname"> 

<span style="clear: both;"></span> 

<label>Phone Number:</label> 
<input type="text" name="phone"> 

空の要素を持つことが許可されていないため、正しくありません。どのように私の問題を回避することができ、両方のブラウザで同じレイアウトを得る任意のアイデア。

おかげ

Answer 1

あなたはラベルのdiv要素ではなく上のラベル/入力のdivの中やclear:leftの各セットをラップすることができます。

label { 
    float: left; 
    width: 250px; 
    margin-top: 10px; 
} 

input { 
    float: left; 
    margin-top: 10px; 
} 
div { 
    clear: left; 
} 

希望します。

Answer 2

私のお気に入りのソリューションは、各フィールド（ラベル+入力）をdivやliなどのラッパーに囲むことです。次に、ラッパーに子要素が含まれていることを確認することができます。それはフィールドが一緒に、そして次々に終わることを保証するはずです。それが終わったら、各ラベルをその入力要素に合わせるのは簡単な作業でなければなりません。

Answer 3

あなたはIE6のためにそれを修正する最も簡単な方法は、あなたのHTMLを変更することなく、上float: leftを交換することである

<fieldset> 
    <label>First Name:</label> 
    <input type="text" name="fname"> 
</fieldset> 

<fieldset> 
    <label>Last Name:</label> 
    <input type="text" name="lname"> 
</fieldset> 

<fieldset> 
    <label>Phone Number:</label> 
    <input type="text" name="phone"> 
</fieldset> 

Answer 4

...フィールドセット内のラベル/入力の各セットを包むことができ入力はdisplay: blockです。これは、しかし、最近のブラウザでそれを中断しますので、あなたは最高の置きたい：

input { 
    display: block; 
    float: none; 
} 

をIE6とIE7（それは同じ問題を抱えている）のためのあなたの条件付きスタイルシート（S）で。

実際、間に要素を追加するという考えはそれほど悪くありません。ただし、<span>の代わりに、それぞれの入力後に<br>を追加することができます。または、好ましくは、<p>で各ペアをラップします。どちらもあなたの問題を解決します。

これは本質的にあなたがすでにやったこと、あるいは私の前に他のものが示唆していたが、より意味的に正しい方法で起こります。実際に

、これらの要素を推定することは、実際にそれらがin HTML4, form elements can only contain blocks (or scripts)ので（例えばp、div、ul又はfieldsetなど）、ブロックレベル要素内であることがを想定している、<form>要素内に直接現れます。

Answer 5

あなたの問題は、IE6（perhaps due to a bug in IE6）でコンテナのラベルと入力の組み合わせが広すぎる可能性が高いです。あなたのコンテナを少し大きくするか、ラベル/入力をわずかに小さくしてみてください。

また、私は最近、誰かのためにput together a demo of different form styling techniquesです。彼らは全体的に役立つかもしれません。