用nowrap實現div內的元素不換行

在編寫自定義插件my-slider的過程中，發現無論float還是inline-block均不能保證div內的內容不換行（這兩個屬性在內容超出容器尺寸后，均將剩余內容做換行處理），在瀏覽器內比較了自己定義的my-slider-item和mui框架定義的mui-slider-item，發現其用了：white-space:nowrap屬性，在MDN、w3cshool里分別查閱了該屬性，描述如下：

MDN：

w3school：

 

即：對父級元素應用了nowrap屬性后，其內部的內聯元素、字符、果凍元素會保持在一行（不換行），直到遇到<br>換行符。

綜上，當我們希望塊內的元素一直水平排列不換行（如想做橫向滾動效果），處理思路就是：

1. 將塊級元素降級為果凍元素、行內元素

2. 對果凍元素、行內元素應用white-space:nowrap樣式

        .my-slider-group{
            overflow: hidden; white-space: nowrap;
        }
        .my-slider-group .my-silder-item{ display: inline-block;
            width:100%;
        }

end...