大家應該都知道float屬性的作用。這里不做累述具则。
我現(xiàn)在要實現(xiàn)這樣的效果即纲，然后滾動，自右向左博肋。
想要實現(xiàn)的效果
可以看到li的寬度是隨內容撐開低斋，不能把寬度設死，當然ul的寬度也就是隨內容撐開匪凡，不能把寬度設死膊畴。
先上代碼，看想要實現(xiàn)的效果病游，以及bug的效果唇跨。*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.main{
margin: 100px auto;
width: 820px;
height: 78px;
background: orangered;
overflow: hidden;
}
ul li{
float: left;
line-height: 66px;
font-size: 18px;
color: #142131;
font-weight: 400;
text-align: center;
padding: 0 12px;
border: 2px seagreen solid;
}
html
效果
估計有人會說用display:inline-block啊。我試了狮惜，效果還是一樣高诺，不信大家可以自行調試。
查閱W3C得知
ul不設置寬度時虱而，他會繼承父級的寬度，而不是隨子元素內容撐開开泽。但是現(xiàn)在我們又不能設置寬度牡拇。
那我們給ul設置寬度?這樣是可行的，通過js獲取到li的寬度，加起來就是了诅迷。但要是通過css實現(xiàn)呢佩番？
給ul嵌套個父級众旗，并且給他的寬度無限大罢杉，讓ul滾動即可。
ul嵌套父級wrap
wrap的css
最終效果
以上贡歧。
好了滩租，打完收工。
（注：前端開發(fā)利朵，細碎繁雜律想。開這個專欄，僅僅是想把我平時工作學習中遇到的問題绍弟，給它記錄下來技即，并沒有做歸納梳理，所以不會那么詳實連貫樟遣。大神大牛而叼，請繞道。如果對你真有幫助豹悬，不吝賜我我一顆紅心葵陵，或者賞我一顆糖吃，我也會滿心笑納瞻佛，手動笑~~~）
