如何 - 等宽导航栏链接
了解如何创建具有等宽导航链接的导航栏。
等宽菜单
创建响应式导航栏
步骤 1) 添加 HTML
示例
<!-- 导航菜单 -->
<div class="navbar">
<a class="active" href="#">首页</a>
<a href="#">搜索</a>
<a href="#">联系</a>
<a href="#">登录</a>
</div>
步骤 2) 添加 CSS
示例
/* 样式化导航菜单 */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* 导航链接 */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* 四个等宽链接。如果您有两个链接，请使用 50%，三个链接使用 33.33% 等 */
text-align: center; /* 如果你想将文本居中 */
}
/* 鼠标悬停时添加背景色 */
.navbar a:hover {
background-color: #000;
}
/* 样式化当前/活动链接 */
.navbar a.active {
background-color: #04AA6D;
}
/* 添加响应式 - 在小于 500 像素的屏幕上，使导航链接彼此叠加显示，而不是并排显示 */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* 如果你想在小屏幕上将文本左对齐 */
}
}
尝试一下 »
带图标的等宽导航链接
提示： 请访问我们的 CSS 导航栏教程 了解更多有关导航栏的信息。
