风格化水平导航栏

Question

我正在创建一个水平导航栏，并希望对其进行样式化，以便在条形图上方显示一条细线（请参阅示例）。

Nav Bar Example

正如您所看到的，红色导航栏上方有一条细金线。我想在橙色导航栏上方看到一条细黑线。

我的代码如下所示： （CSS）

nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#c0872e}
nav li {display:inline-block;background-color:#c0872e;}
nav a {line-height:35px; color:white; padding:0 30px; font-size:22px; font-family:WindsorDemi.fog Cn; background-color:#c0872e;}
nav a:hover {text-decoration:none}

（HTML）

<div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
</ul>
</div>

请告诉我如何达到预期的效果。谢谢！

Answer 1

您可以使用边框完成此操作：

styles:scss

这里有一个JSFiddle来向您展示它的外观。

希望这有帮助！如果您有任何问题，请告诉我。

Answer 2

这样做（添加border-top）

<强> CSS

nav ul {
    border-top: 2px solid #000; /* Added */
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
    background-color:#c0872e
}

Answer 3

首先，我们需要将您的周围div更改为nav元素。

    <nav>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    </ul>
    </nav>

然后只需将一个border-top添加到nav css。

    nav {width:100%;display:block;border-top:4px solid #000;}
    nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#c0872e}
    nav li {display:inline-block;background-color:#c0872e;}
    nav a {line-height:35px; color:white; padding:0 30px; font-size:22px; font-family:WindsorDemi.fog Cn; background-color:#c0872e;}
    nav a:hover {text-decoration:none}