エラーラベルの自動幅

Question

エラーラベルは、テーブルの幅まで表示されます。このよう：

alt text http://img518.imageshack.us/img518/8864/width1.jpg

は、どのように私はラベルのテキストまで、それを表示することができますか？ DIVを設定するdiv要素を持つ

label.error { color: red; font-size:16px; font-family:Nyala; background-color: #FFFFCC; display:block; width:auto; } 

Answer 1

これは確かにエラー・メッセージが含まれているために余分なスパン（.errorMsg）がありますが、（余分なdivを追加することなく、動作します。

をXHTML 1.0厳格なDOCTYPEを使用して

<style> 

     #container 
      {width: 50%; 
      margin: 0 auto; 
      } 

     label {display: inline-block; 
      width: 48%; 
      text-align: right; 
      } 

     input {display: inline-block; 
      width: 50%; 
      } 
     .errorMsg 
      {display: block; 
      width: 51%; 
      margin: 0 0 0.5em 49%; 
      color: #f00; 
      background-color: #ffa 
      } 

    </style> 

... 

    <div id="container"> 

     <form> 

      <label for="input1">Label 1</label> 
       <input type="text" id="input1" name="input1" /> 
       <span class="errorMsg">Error message</span> 

      <label for="input1">Label 2</label> 
       <input type="text" id="input2" name="input2" /> 
       <span class="errorMsg">Error message</span> 

     </form> 

    </div> 

それは注目に値します.errorMsgの幅は入力の境界に合わせて50％ではなく51％です（CSSで定義されている50％の幅に追加されていますが、これはUbuntu 8.04ではFF3.xかもしれません）。徹底的にテストされていないか、まったく、私は恐れているYM、いつものように、MV。

デモンストレーション：http://www.davidrhysthomas.co.uk/so/errorLabels.html

Answer 2

ラップフィールドは、所望の幅を持っている、と入力してdiv要素を埋めるためにラベルを設定するには：これは、CSSです。

ラベルまたは入力の両方の幅を同じピクセルに設定します。 Divメソッドは少し柔軟です。

ただし、「名前：」プロンプトはラベルです。エラーはスパンか何かでなければなりません。HTMLが考えている方法ではなく、少なくとも "ラベル"ではありません。