css左右滚动菜单怎么用

CSS左右滚动菜单是一种常见的网页设计元素，它可以方便地让用户在多个选项之间进行选择。实现这个效果的方式主要是通过CSS的样式来控制元素的滚动。下面我们就来看一下怎么使用CSS样式来实现一个左右滚动菜单。

.container{
   width: 100%;
   overflow: hidden;
   white-space: Nowrap;
   margin: 0 auto;
}

.item{
   display: inline-block;
   padding: 0px 10px;
}

.btn{
   display: inline-block;
   padding: 10px;
   background-color: #eee;
   border: none;
}

.btn-left{
   float: left;
}

.btn-right{
   float: right;
}

首先，我们需要准备一个大容器（container），里面包含着我们的菜单选项（item）。为了让这个容器能够左右滚动，我们需要将其的overflow属性设置为hidden，同时让它的white-space属性为Nowrap。这样就会让里面的选项变成一排，而且当超过容器的范围时，就会隐藏掉超过部分。

接着，我们为每一个选项加上了一个显示方式为inline-block的样式，这样就可以让它们排在一排，并且能够对齐。我们还为它们加上了一些padding，以便让其与其他元素之间有一些空隙。

接下来是按钮部分，我们创建了两个按钮，一个是左边滚动的按钮，一个是右边滚动的按钮。它们都是用一个class样式来表示，并在CSS中设置了一些样式，比如display为inline-block，padding为10px，background-color为#eee等等。

最后我们用了一些float属性来控制这两个按钮的位置，让一个在左边，一个在右边。这样，在用户点击左右按钮时就可以控制container容器向左或向右滚动了。