champs de mise en page en utilisant CSS

Question

Je suis en train de champ mise en page des étiquettes et des valeurs comme ceci:

 Name: Bob 
     Age: 25 
Occupation: Code Monkey 

Le code HTML correspondant est

<div class="field"> 
    <span class="reset">End Time:</span> 
    <span>05:00pm</span> 
</div> 

<div class="field"> 
    <span class="reset">Items:</span> 
    <span></span> 
</div> 

<div class="field"> 
    <span class="reset">Repeats:</span> 
    <span>Never</span> 
</div> 

Et le CSS concerné est:

div.field { 
    margin-bottom:10px; 
} 

span.reset { 
    display: block; 
    float: left; 
    margin-right: 0.5em; 
    text-align: right; 
} 

Malheureusement, le champ "Répétitions" est affiché sur la même ligne que le champ "Items". J'ai vérifié que cela n'arrive que lorsque la valeur du champ "Items" est vide <span></span>.

J'ai essayé d'ajouter clear: left à span.reset, et bien que cela arrête deux champs apparaissant sur la même ligne, cela perturbe totalement l'alignement des étiquettes et des champs.

Y at-il un moyen de résoudre ce problème sans changer radicalement le XHTML?

Merci, Don

Answer 1

Ajouter à votre CSS clear: left;:

div.field { 
    clear:left; 
    margin-bottom:10px; 
} 

Cela forcera à la ligne suivante ci-dessous.

Answer 2

Si vous voulez que tous ces éléments soient alignés, vous devrez donner une étiquette à l'étiquette (réinitialiser?) D'une largeur fixe directement ou indirectement. Essayez ceci:

div.field { overflow: hidden; } 
div.field span { margin-left: 150px; display: block; } 
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }