Automatische Breite des Fehlerlabels

Question

Das Fehlerlabel wird bis zur Breite der Tabelle angezeigt. Da dies:

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

Wie kann ich es bis zum Text des Etiketts anzuzeigen? Dies ist der CSS:

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

Answer 1

Dies funktioniert, ohne zusätzliche divs Zugabe (obwohl zugegebenermaßen es eine zusätzliche Spanne (.errorMsg), um die Fehlermeldung enthalten:.

Mit XHTML 1.0 strict 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> 

Es ist erwähnenswert, dass die Breite des .errorMsg 51% ist, nicht 50%, um die Grenzen der Eingabe zu berücksichtigen (wird zu der 50% Breite hinzugefügt, die im CSS definiert ist. Das kann aber nur FF3.x auf Ubuntu 8.04 sein. Ich habe nicht erschöpfend getestet, oder viel, ich fürchte, YM, wie immer, MV.

Demonstration unter: http://www.davidrhysthomas.co.uk/so/errorLabels.html.

Answer 2

Wrap die Felder mit einem div, das div die gewünschte Breite aufweist, und stellen Sie die Eingabe und das Etikett die div zu füllen.

Entweder das oder die Breite für die Beschriftung und den Eingang auf die gleichen Pixel einstellen. Div-Methode ist ein bisschen flexibler.

Beachten Sie jedoch, dass die Eingabeaufforderung "Name:" die Bezeichnung ist. Der Fehler sollte ein Bereich oder etwas sein, es ist kein "Label", zumindest nicht in der Art, wie HTML darüber denkt.