HTML/CSS：导航栏水平和垂直

最新推荐文章于 2026-04-04 02:26:57 发布

转载最新推荐文章于 2026-04-04 02:26:57 发布 · 1.8k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/One-sprite/p/7017699.html

这篇博客介绍了如何使用HTML和CSS创建垂直和水平导航栏。对于垂直导航栏，通过删除列表项标记、设置适当的宽度和display属性实现。水平导航栏则提供了行内列表法和浮动列表法两种方式，其中浮动列表法适用于需要链接宽度一致的情况。

1.垂直导航栏

导航栏 = 链接列表
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的。
如需构建垂直导航栏，我们只需要定义 <a> 元素的样式

演示：

代码：

HTML

<div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">MTRA</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">MORE</a></li>
        </ul>
</div>

CSS

.nav {
background-color: #F5F5DC;
}

.nav ul {
margin: 0;padding: 0;
list-style-type: none;
line-height: 3em;
}

.nav a {
display: block;
width: 10em;
text-align: center;
text-decoration: none;
background-color: #CCCCCC;
}

.nav a:hover {
background-color: #E6E6FA;
}

核心代码：

list-style-type:none - 删除圆点。导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
width:10em - 块元素默认占用全部可用宽度。此处自定义宽度。

提醒：请始终规定垂直导航栏中 <a> 元素的宽度。如果省略宽度，IE6 会产生意想不到的结果。

2.两种水平导航栏设置方式

有两种创建水平导航栏的方法。使用行内或浮动列表项。
两种方法都不错，但是：如果希望链接拥有相同的尺寸，就必须使用浮动方法。

1.行内列表法

演示：

代码：

HTML

<div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">MTRA</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">MORE</a></li>
        </ul>
</div>

CSS

.nav {
text-align: center;
background-color: #F5F5DC;
}

.nav ul {
list-style-type: none; 
line-height: 5em;
}

.nav ul li {
display: inline;
}
.nav a {
text-decoration: none;
background-color: #CCCCCC;
}

.nav a:hover {
background-color: #E6E6FA;
}

核心代码：

display:inline - 默认地，<li> 元素是块元素。在这里，我们去除了每个列表项前后的换行，以便让它们在一行中显示。

2.浮动列表法

在上面的例子中，链接的宽度是不同的。

为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度：

演示：

代码：

HTML

<div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">MTRA</a></li>
            <li><a href="#">PRODUCT</a></li>
            <li><a href="#">MORE</a></li>
        </ul>
</div>

CSS

.nav {
    height: 5em;
    width: 50em;
    margin: 0 auto;
    background-color: #F5F5DC;
    text-align: center;
}

.nav ul {
    margin: 0;padding: 0;
    list-style-type: none; 
    display: inline-block;
}

.nav ul li {
    float:left;
}

.nav a {
    display:block;
    width: 10em;
    height: 5em;
    line-height: 5em;
    text-decoration: none;
    background-color: #CCCCCC;
}

.nav a:hover {
    background-color: #E6E6FA;
}

核心代码：

display: inline-block - 使列表正常居中显示。
float:left - 使用 float 来把块元素滑向彼此。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
width:10em - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要自定义宽度。

转载于:https://www.cnblogs.com/One-sprite/p/7017699.html