横向滚动条怎么出来？很多人肯定以为是：overflow-x:scroll;当然这是可以的；
我们来试一下
、、、
.box{
width:300px;
height:200px;
margin:100px auto;
overflow-x:scroll;
overflow-y:hidden;
}
.box1{
width:600px;
height:200px;
background:#6f6;
}
<div class="box">
<div class="box1">这是滚动条，这是滚动条，这是滚动条，这是滚动条，这是滚动条，这是滚动条，这是滚动条， </div>
</div>
、、、
当然这样就可以了，我放出图片
当然我说的肯定不是这儿简单的。
有的时候我们会遇到一行内有多个元素，如果元素足够多的话就会出现滚动条。
我们来试一试
、、、
ul,li{
list-style: none;
}
.box{
width:300px;
height:200px;
margin:100px auto;
overflow-x:scroll;
overflow-y:hidden;
}
.box1{
width:50px;
height:200px;
background:#6f6;
float:left;
margin-right:20px;
}
<ul class="box">
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
</ul>
、、、
在这里放出图片
哎呀！怎么会是这样的（心里一万只草泥马奔腾而过。。。。）。
剩下的几个跑哪去了？我们把
overflow-y:hidden;
改为
overflow-y:auto;
哎呀小兔崽子跑下面去了。我们想象也是。父元素撑不下了所以跑下面去了。
那overflow-x:scroll；那我们怎样让它一行显示。试着这样想一想，我们试着让ul宽度不固定，然后给ul一个父元素，然后宽度固定然后超出，出现滚动条，来这样试一试。
、、、
ul,li{
list-style: none;
}
.scroll{
width:300px;
height:200px;
overflow-x:scroll;
overflow-y:auto;
margin:100px auto;
}
.box{
width:auto;
height:200px；
}
.box1{
width:50px;
height:200px;
background:#6f6;
float:left;
margin-right:20px;
margin-bottom:20px;
}
<div class="scroll">
<ul class="box">
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
<li class="box1"></li>
</ul>
</div>
、、、
这是效果
怎么又是这样啊？（。。。）然后一会发现无论你怎样改宽度最大也就和父元素同宽。你这是会想要是强制一行显示该多好啊。对。。。下面就是我想说的，不知道大家知不知道display:table;属性。改属性的作用就是讲元素变为table表格的性质。大家想一想tr下面的td不就是一行吗；我们试一试
、、、
ul,li{
list-style: none;
}
.scroll{
width:300px;
height:200px;
overflow-x:scroll;
overflow-y:auto;
margin:100px auto;
}
.box{
width:auto;
height:200px;
display:table-row;/转成tr/
}
.box1{
width:100px;
height:200px;
display:table-cell;/转成td/
padding:10px;
}
span{
display: block;
width:50px;
height:200px;
background:#6f6;
}
<div class="scroll">
<ul class="box">
<li class="box1"><span>1</span></li>
<li class="box1"><span>2</span></li>
<li class="box1"><span>3</span></li>
<li class="box1"><span>4</span></li>
<li class="box1"><span>5</span></li>
<li class="box1"><span>6</span></li>
<li class="box1"><span>7</span></li>
<li class="box1"><span>8</span></li>
<li class="box1"><span>9</span></li>
</ul>
</div>
、、、
放出图片
没出就是这样，至于我为什么要加一个span标签，因为td设置宽度是没有作用的，所有的td评分tr的宽度，所以我们就用span强制撑大td，这样就可以了。
第一次写，语言、格式不是特别好（其实挺烂的），希望大家多多支持，小的感激不尽。
