效果如上.

? ? ?注意事項(xiàng):

? ? ? ? 1.?需要滑動的元素不可以用 float 浮動，float浮動成為同一行，需要父元素?fù)碛凶銐虻膶挾?。?yīng)使用dislay:inline-block; 進(jìn)行元素的橫向編排，同時需要確定每個滑動的小元素的寬度。

? ? ? ? 2.inline行內(nèi)元素，inline-block行內(nèi)塊元素，block塊元素三者之間的側(cè)重點(diǎn)

? ? ? ?作者：Ry-yuan

? ? ? ?本文地址：http://www.cnblogs.com/Ry-yuan/p/6848197.html

? ? ? ? 3.? 包裹 scroll-view 的大盒子有明確的寬和加上樣式-->? ? ? ? ? ? overflow:hidden;white-space:nowrap;? ?還需要scroll-x屬性 。

? ? ?app上則可以在ul上使用如下：

? ? ? ? ?overflow-x:?scroll;

? ? ? ? ?overflow-y:?hidden;

? ? ? ? ?white-space:?nowrap;? ? 規(guī)定如何處理元素中的空白。

? ? ? ? ?width:?calc(100% - 0.67rem);

? ? ? ? ?nowrap文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。

需要注意文本不換行與所在元素的寬度的關(guān)系。

? ? ? ? 4.scroll-view 中的包裹需要滑動的元素的大盒子用 display:flex; 是沒有作用的；

? ? ? ?5.微信開發(fā)者工具上無法滑動，但是真機(jī)測試都是可以滑動的，無論安卓，ios?

? ? ? ?6.display，布局的最基礎(chǔ)樣式，了解各種布局方式的適用場景。

? ? ? ?7.css最基礎(chǔ)的?文本屬性（Text），還需要學(xué)習(xí)? ? ? ? http://www.w3school.com.cn/cssref/index.asp#contentpm