如何用短线获得最高保证金，底线保证金为全线

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用作“main”元素。

在@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;
}