大家都知道css中<ul>元素中的各條目<li>默認(rèn)都是縱向排列的，我們需要定義CSS來讓其橫向排列起來并且超出屏幕可以滑動(dòng)。因?yàn)楸救耸莌tml小白 查了資料才實(shí)現(xiàn)下面GIF圖的效果。（有什么更好的方法或者有寫的不對(duì)的地方 希望大神們多多指出，與君共勉）
效果GIF圖：
方案一：
第一步 ul 中的css設(shè)置 <ul id = "list"> </ul>
#list { overflow-x: auto; //設(shè)置x軸可滑動(dòng) list-style: none;//去掉li上的小點(diǎn) white-space:nowrap;//元素不換行 width: auto;(寬度) }
第二步 li中的css設(shè)置 <li class = "item">
.item { margin-left: 20px; //每個(gè)li設(shè)置間距為20px display: inline-block; //讓所有的li在一行 注意這里不能用float:left 因?yàn)樵O(shè)置float后里超過一屏后會(huì)自動(dòng)換行 }
先介紹一下上面的重要的css中的屬性作用，大家也可以去w3scholl去參考學(xué)習(xí)判导。
overflow-x
這只是在x軸上的滑動(dòng) 有一個(gè)相對(duì)的是overflow-y 只在y軸上滑動(dòng)
- visible 不裁剪內(nèi)容嫉父，可能會(huì)顯示在內(nèi)容框之外。
- hidden 裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制眼刃。 （和正常的overflow:hidden效果一樣）
- scroll 裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制绕辖。 （不管超過屏幕 一直有滾動(dòng)條）
- auto 如果溢出框，則應(yīng)該提供滾動(dòng)機(jī)制擂红。（只有超出屏幕 才會(huì)有滾動(dòng)條）
- no-display 如果內(nèi)容不適合內(nèi)容框仪际，則刪除整個(gè)框。 這兩個(gè)還沒有用過
- no-content 如果內(nèi)容不適合內(nèi)容框昵骤，則隱藏整個(gè)內(nèi)容树碱。
width
width是我們最常用的屬性，但是我常用的為lenght和% 忽略了auto這個(gè)屬性 我們大可不惜自己去計(jì)算寬度变秦，使用auto可以自適應(yīng)寬度成榜。
- auto 默認(rèn)值。瀏覽器可計(jì)算出實(shí)際的寬度蹦玫。
- length 使用 px赎婚、cm 等單位定義寬度。 (用的比較多)
- % 定義基于包含塊（父元素）寬度的百分比寬度钳垮。(用的比較多)
- inherit 規(guī)定應(yīng)該從父元素繼承 width 屬性的值惑淳。
方案二：
使用用flex-box布局
#list { displey:-webkit-flex; display: flex; -webkit-flex-flow:row nowrap; //設(shè)置排列方式為橫向排列额港，并且超出元素不換行 flex-flow:row nowrap; overflow-x: auto; list-style: none;}
