如何在一組標籤下面放置一條線？

Question

我想在asp.net mvc上完成的一個應用程序上的一組標籤下定位水平線。我相信我必須在CSS上這樣做，但我似乎無法找到放置此類線條的正確方法。 每次嘗試時，該行都會在標籤的右側結束，我不想使用一大堆
是迄今爲止的正確方法。

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

有人可以讓我在正確的方向嗎？

Answer 1

溝<hr />並添加此改變你的CSS規則<div style="float:left; margin: 20px; border-bottom: 1px solid #000;">

如果您在單元DIV多個浮動的div，穿上了邊框的規則，如果你希望它跨越一路延伸並設置overflow:hidden;或overflow:auto，這樣它就不會崩潰（當容器只包含浮動元素，除非設置了溢出）。這樣您可以避免設置clear規則或爲該行添加額外的標記。

Answer 2

<hr style="clear: left" /> 

Answer 3

Jeff和Joel talked about this in Podcast #4。具體來說，CSS極端主義者會更喜歡你在CSS中這樣做，但實際問題會覆蓋這一點。保持它現在的位置。