css导航左右滑动 |css网页制作教程

css img 间距，css的前端框架，css3 平行移动，css 表格宽度自动调整，html 和css 框中框，css 禁止scroll滚动条，css网页制作教程 css导航左右滑动 |css网页制作教程

<nav class="menu">
<ul class="menu-list">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About Us</a></li>
<li class="menu-item"><a href="#">Services</a></li>
<li class="menu-item"><a href="#">Portfolio</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li>
</ul>
</nav>

为了让导航栏左右滑动，大家需要把菜单项放在一个容器里，并给容器设定宽度和超出部分隐藏的样式：

.menu {
width: 80%;
overflow-x: scroll;
}

接下来，大家需要把每个菜单项改为块元素（display: block），并添加 float 属性以便它们都可以排列在一行中：

.menu-list {
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 1000px;
}
.menu-item {
float: left;
}
.menu-item a {
display: block;
padding: 10px;
text-decoration: none;
}

最后，大家加上一些样式来使导航栏更美观：

.menu {
width: 80%;
overflow-x: scroll;
background-color: #333;
color: #fff;
}
.menu-list {
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 1000px;
}
.menu-item {
float: left;
border-right: 1px solid #444;
}
.menu-item:last-child {
border-right: none;
}
.menu-item a {
display: block;
padding: 10px;
text-decoration: none;
color: inherit;
}
.menu-item a:hover {
background-color: #444;
}

现在，大家的左右滑动导航栏就已经完成了。当菜单项比较多时，用户可以通过水平滚动来查看所有的菜单项。