样式化水平导航栏

Question

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

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

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

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

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

这里 JSFiddle 向您展示它的外观。

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

Answer 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)
}

Answer 3

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

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

然后只需在导航中添加一个 border-top 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}

样式化水平导航栏

Stylizing Horizontal Navigation Bar

html

css

navigation

center

centering