橫向滾動條怎么出來躯概？很多人肯定以為是：overflow-x:scroll;當(dāng)然這是可以的组砚；
我們來試一下
铆惑、堆缘、滔灶、
.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>
唆鸡、涝影、、
當(dāng)然這樣就可以了争占，我放出圖片
當(dāng)然我說的肯定不是這兒簡單的燃逻。
有的時候我們會遇到一行內(nèi)有多個元素，如果元素足夠多的話就會出現(xiàn)滾動條臂痕。
我們來試一試
伯襟、、握童、
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;
哎呀小兔崽子跑下面去了璃哟。我們想象也是。父元素?fù)尾幌铝怂耘芟旅嫒チ恕?br>
那overflow-x:scroll喊递；那我們怎樣讓它一行顯示随闪。試著這樣想一想，我們試著讓ul寬度不固定骚勘，然后給ul一個父元素铐伴，然后寬度固定然后超出，出現(xiàn)滾動條调鲸，來這樣試一試盛杰。
、藐石、即供、
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>
于微、逗嫡、、
這是效果
怎么又是這樣爸暌馈驱证？（。恋腕。抹锄。）然后一會發(fā)現(xiàn)無論你怎樣改寬度最大也就和父元素同寬。你這是會想要是強(qiáng)制一行顯示該多好啊荠藤。對伙单。。哈肖。下面就是我想說的吻育，不知道大家知不知道display:table;屬性。改屬性的作用就是講元素變?yōu)閠able表格的性質(zhì)淤井。大家想一想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;/轉(zhuǎn)成tr/
}
.box1{
width:100px;
height:200px;
display:table-cell;/轉(zhuǎn)成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標(biāo)簽渐行，因為td設(shè)置寬度是沒有作用的轰坊，所有的td評分tr的寬度，所以我們就用span強(qiáng)制撐大td祟印，這樣就可以了肴沫。
第一次寫，語言蕴忆、格式不是特別好（其實挺爛的）颤芬，希望大家多多支持，小的感激不盡套鹅。
