Largeur automatique de l'étiquette d'erreur

Question

L'étiquette d'erreur s'affiche jusqu'à la largeur de la table. Comme ceci:

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

Comment puis-je afficher jusqu'à ce que le texte de l'étiquette? Ceci est le css:

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

Answer 1

Cela fonctionne, sans ajouter de divs supplémentaires (il est vrai il y a une durée supplémentaire (.errorMsg) pour contenir le message d'erreur:.

utilisant XHTML 1.0 doctype strict

<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> 

Il convient de noter que la largeur du .errorMsg est de 51%, pas de 50%, pour accommoder les bordures de l'entrée (étant ajouté à la largeur de 50% définie dans le CSS), mais ce n'est peut-être que FF3.x sur Ubuntu 8.04. Je ne suis pas testé de manière exhaustive, ou bien je crains ... YM, comme toujours, MV

Démonstration à: http://www.davidrhysthomas.co.uk/so/errorLabels.html.

Answer 2

Envelopper les champs avec un div, régler la div pour avoir la largeur désirée, et régler l'entrée et l'étiquette pour remplir la div.

Soit cela ou définir la largeur pour l'étiquette et l'entrée pour les mêmes pixels. La méthode Div est un peu plus flexible. Notez toutefois que l'invite "Name:" est l'étiquette. L'erreur devrait être un span ou quelque chose, ce n'est pas un "label", du moins pas dans la façon dont HTML pense à ce sujet.