如何在一组标签下面定位一条线?

时间:2009-06-15 14:58:01

标签: asp.net-mvc css

我正在尝试在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>

有人能指引我朝这个方向前进吗?

3 个答案:

答案 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中这样做,但实际问题会覆盖它。把它保持在现在的位置。