Wie positioniert man eine Zeile unterhalb einer Gruppe von Tags?

Question

Ich versuche, eine horizontale Linie unter einer Gruppe von Tags in einer App auf asp.net mvc zu positionieren. Ich glaube, ich muss das auf der CSS tun, aber ich kann einfach nicht den richtigen Weg finden, eine solche Linie zu platzieren. Jedes Mal, wenn ich es versuche, endet die Zeile auf der rechten Seite der Tags und ich habe nicht das Gefühl, eine ganze Reihe von
ist bei weitem der richtige Weg.

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

Kann mir hier jemand in die richtige Richtung orientieren?

Answer 1

Ditch die <hr /> und fügen Sie diese Ihre CSS-Regel

-<div style="float:left; margin: 20px; border-bottom: 1px solid #000;"> ändern Wenn Sie mehrere schwebte divs im Abschnitt div haben, legen Sie die Grenze der Regel auf, dass, wenn Sie es wollen über den ganzen Weg verlängern und setze entweder overflow:hidden; oder overflow:auto, so dass es nicht kollabiert (welche Container tun, wenn sie nur floated Elemente enthalten, wenn kein Überlauf gesetzt ist). Auf diese Weise können Sie vermeiden, eine clear Regel zu setzen oder zusätzliches Markup für die Linie hinzuzufügen.

Answer 2

<hr style="clear: left" /> 

Answer 3

Jeff und Joel talked about this in Podcast #4. Insbesondere würden die CSS-Extremisten bevorzugen, dass Sie das in CSS tun, aber praktische Bedenken haben Vorrang. Behalte es, wo es jetzt ist.