Problème de présentation dans une liste non ordonnée

Question

Je rencontre un problème avec la présentation correcte des éléments dans une liste non ordonnée. Les étiquettes sont flottantes à gauche et les portées connexes qui sont longues sont enveloppées et apparaissent sous l'étiquette. J'ai besoin d'une solution qui garde les envergures connexes dans leurs colonnes respectives. En d'autres termes, je ne veux pas que les longues portées soient visibles sous les étiquettes. De quelle propriété puis-je profiter pour obtenir la disposition souhaitée dans tous les navigateurs populaires, y compris IE6? Merci d'avance pour l'aide.

Mon code est le suivant:

<ul> 
    <li> 
     <label>Name</label> 
     <span><%= Html.Encode(Model.Name) %></span> 
    </li> 
    <li> 
     <label>Entity</label> 
     <span><%= Html.Encode(Model.Entity) %></span> 
    </li> 
    <li> 
     <label>Phone</label> 
     <span><%= Html.Encode(Model.Phone) %></span> 
    </li> 
</ul> 

Mon style CSS est la suivante:

ul 
{ 
    display:block; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

ul li label 
{ 
    float:left; 
    width:100px; 
} 

Answer 1

Cela fonctionne dans Firefox. Il devrait également fonctionner dans IE6.

ul li span { 
    display: block; 
    margin-left: 100px; 
}