样式化水平导航栏答案

【问题标题】：Stylizing Horizontal Navigation Bar样式化水平导航栏
【发布时间】：2015-07-26 10:38:50
【问题描述】：

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

如您所见，红色导航栏上方有一条细金线。我想在橙色导航栏上方画一条细黑线。

我的代码如下所示： (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>

请告诉我如何才能达到这种预期效果。谢谢！

【问题讨论】：

标签： html css navigation center centering

【解决方案1】：

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

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

这是一个JSFiddle，向您展示它的外观。

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

【讨论】：

【解决方案2】：

只需这样做（添加边框顶部）

CSS

nav ul {
 list-style-type:none;
 margin:0;padding:0;
 text-align:center;
 background-color:#c0872e;
border-top: solid 1px #000; // Add this (adjust your needs)
}

【讨论】：

【解决方案3】：

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

    <nav>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="products.html">Products</a></li>
    </ul>
    </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}

【讨论】：

谢谢，我不知道你可以在顶部添加边框。