Comment positionner une ligne sous un groupe de tags?

Question

J'essaye de positionner une ligne horizontale sous un groupe d'étiquettes sur une application faite sur asp.net mvc. Je crois que je dois le faire sur le CSS mais je n'arrive pas à trouver la bonne façon de placer une telle ligne. Chaque fois que j'essaie, la ligne se termine à la droite des étiquettes et je n'ai pas envie d'utiliser tout un tas de
est la bonne façon de loin.

<div id="section"> 
    <div style="float:left; margin:20px"> 
     <img alt="Upload" src="/Content/Images/Upload_yellow.png"/> 
     <img alt="Confirm" src="/Content/Images/Confirm_white.png"/> 
     <img alt="Review" src="/Content/Images/Review_white.png"/> 
    </div> 
    <hr /> 

</div> 

Quelqu'un peut-il m'orienter dans la bonne direction ici?

Answer 1

Ditch le <hr /> et ajoutez ce modifier votre règle CSS <div style="float:left; margin: 20px; border-bottom: 1px solid #000;">

Si vous avez plusieurs divs flottaient dans la div section, mettre la règle de frontière que si vous voulez étendre sur toute la largeur et définissez overflow:hidden; ou overflow:auto afin qu'il ne s'effondre pas (ce que les conteneurs font lorsqu'ils ne contiennent que des éléments flottants sauf si un débordement est défini). De cette façon, vous pouvez éviter de définir une règle clear ou d'ajouter un balisage supplémentaire pour la ligne.

Answer 2

<hr style="clear: left" /> 

Answer 3

Jeff et Joel talked about this in Podcast #4. Plus précisément, les extrémistes CSS préféreraient que vous le fassiez en CSS, mais les préoccupations pratiques l'emportent sur cela. Gardez-le où c'est maintenant.