css - 如何用短线获得上边距，用整线获得下边距

Question

它比描述更容易显示......

对于网站菜单，我想在顶部有一个“不太长的行”，在下面有一个完整的行。是否可以在一个包含菜单的类（即 topnav）中做到这一点，还是我需要更多元素来做到这一点？

Answer 1

就我个人而言，我更喜欢让顶线成为菜单元素的宽度，然后有一个<hr />或类似的东西来制作底边。

也就是说，如果你有纯色背景，你可以试试这个：

#menu {
    position:relative;
    border-top:1px solid black;
    border-bottom:1px solid black;
}
#menu:before, #menu:after {
    position:absolute;
    top:-1px;
    width:32px;
    height:3px;
    background:white;
}
#menu:before {left:0}
#menu:after {right:0}

Answer 2

最简单的方法是拥有两个元素——容器元素和主元素。容器元素需要 100% 宽并具有底部边框，而主元素需要根据需要具有足够的宽度并具有顶部边框。

您可以div用作容器和ul“主要”元素。

在@Brewal 的帮助下，它看起来像这样：http: //jsfiddle.net/GTG6U/3/

<div id="wrap">
    <ul id="menu">
        <li>Here are</li>
        <li>many wonderful</li>
        <li>menus</li>
        <li>etc</li>
    </ul>
</div>

li {
    float: left;
    padding: 0 10px;
    list-style: none;
    margin: 0;
    text-align: center;
    height: 20px;
}
#menu {
    display: inline-block;
    margin: auto;
    height: 20px;
    padding: 10px 0;
    border-top: 1px solid green;
}
#wrap {
    border-bottom: 1px solid green;
    text-align: center;
}