我正在尝试在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>
有人能指引我朝这个方向前进吗?
答案 0 :(得分:5)
抛弃<hr />
并将此更改添加到<div style="float:left; margin: 20px; border-bottom: 1px solid #000;">
如果div部分中有多个浮动div,请将边框规则放在其上,如果您希望它一直延伸并设置overflow:hidden;
或overflow:auto
,那么它就不会崩溃(除非设置了溢出,否则哪些容器只包含浮动元素时才会执行)。这样,您可以避免设置clear
规则或为该行添加额外标记。
答案 1 :(得分:2)
<hr style="clear: left" />
答案 2 :(得分:0)
杰夫和乔尔talked about this in Podcast #4。具体来说,CSS极端分子更喜欢你在CSS中这样做,但实际问题会覆盖它。把它保持在现在的位置。