CSS - ラベルタグでフォームを整形する

意味的にレイアウトしてCSSでフォーマットしようとしているフォームがあります。動的に（ASP.NET MVCから）生成されるので、一部の要素は、入力タグではなくテキストとしてレンダリングされる可能性があります。私は、フォームを整理し、値/値のボックスを整列するためにラベルタグに幅を追加しようとしていますが、私はそれらを浮かせば（これは正しいですか？これは、ラベルタグの後に値をレンダリングしても問題ありませんが、値が空白の場合、両方のタグがpタグ内に含まれていても、左の浮動小数点は前のラベルと重なって見えます（これらはブロックレベルでなければなりません）。私は間違って何をしていますか？CSS - ラベルタグでフォームを整形する

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title> 

    Edit 

</title> 
     <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file --> 
     <style type="text/css"> 
      div.FieldGroup {background-color: Blue; } 
      p.Field { display: block; } 
      span.NoteHeader { font-style: italic;} 
      label { float: left; width: 150px;} 
     </style> 
</head> 

<body> 
    <div id="main"> 


    <h2>Edit</h2> 



    <form action="" method="post"> 
     <div id="MainSection" class="FieldGroup"> 
      <fieldset> 
       <legend>Person Identification</legend> 
       <p class="Field"> 
        <label>Name:</label> 
        Name 
       </p> 
       <p class="Field"> 
        <label for="Colour">ChildStatus:</label> 
        <select id="Colour" name="Colour"> 
         <option value="10">Red</option> 
         <option value="20">Yellow</option> 
         <option selected="selected" value="30">Orange</option> 
        </select> 
       </p> 
       <p class="Field"> 
        <label for="Age">Age:</label> 
        <input id="Age" name="Age" type="text" value="" /> 

       </p> 
       <p class="Field"> 
        <label>Birthplace:</label> 
       </p> 
       <p class="Field"> 
        <label for="Reference">Reference:</label> 
        <input id="Reference" name="Reference" type="text" value="" /> 
       </p> 
      </fieldset> 
     </div> 
    </form> 
    </div> 

</body> 
</html>

乾杯

（PS - 彼らは値を変更することはできません場合、私は、彼らがプレーンテキストをしたいとこれらのブランクを含むように読み取り専用テキストボックスに追加することはできません）

出典

2009-08-21 Mad Halfling

ラベル/入力を段落要素にラッピングする理由は何ですか？それはうまくいくかもしれませんが、意味的にdivではありませんか？たぶんそれは私の考えでは多分そう思うかもしれませんが、私が考えることの1つは、ブラウザーがpタグに異なるものを追加するので、p.Fieldスタイルで退屈なスタイル値を明示的に設定することです（マージンとパディング特に）、まれにいずれかのブラウザが同じです。少なくともdivを使うと、ほとんどのブラウザはすべてのスタイルのデフォルト値が0または空白のコンテナとしてしか扱われないはずです。 –

私はそれを試してみるように変更しましたが、問題には何の違いもありません。 –

は明確追加：両方のあなたのp.Field宣言に：

p.Field { 
    display: block; 
    clear: both; 
}

出典

2009-08-21 17:59:24 Pat

他の誰かが別のフォームを使用していると、クリアされました。これは十分です。 –

私はdivをpsに変更しましたが、これはもっとうまくいきました（psはVSのデフォルトでした） –

ラベルのcssにclear：leftプロパティを追加します。

出典

2009-08-21 16:47:54 MyItchyChin

これは機能しません。次の入力ボックスが前の行の末尾に移動することを意味します。 –

をあなたは自分の幅を設定するために、あなたのlabel秒をフロートする必要はありません、あなただけの彼らのdisplayblockに変更する必要があります。それらを浮動させている場合は、overflowがhiddenまたはautoの場合を除いて、そのブロックを含むブロックpはそれらを囲むように展開されません。 labelをクリアすることで、スタッキングを防ぐこともできますが、それはすべてあなたが望む外観に依存します。

出典

2009-08-25 05:53:58

CSS - ラベルタグでフォームを整形する

答えて

関連する問題