在編寫自定義外掛程式my-slider的過程中,發現無論float還是inline-block均不能保證div內的內容不換行(這兩個屬性在內容超出容器尺寸後,均將剩餘內容做換行處理),在瀏覽器內比較了自己定義的my-slider-item和mui框架定義的mui-slider-item,發現其用了:white-space:nowrap屬性,在mdn、w3cshool裡分別查閱了該屬性,描述如下:
即:對父級元素應用了nowrap屬性後,其內部的內聯元素、字元、果凍元素會保持在一行(不換行),直到遇到
換行符。
綜上,當我們希望塊內的元素一直水平排列不換行(如想做橫向滾動效果),處理思路就是:
1. 將塊級元素降級為果凍元素、行內元素
2. 對果凍元素、行內元素應用white-space:nowrap樣式
.my-slider-group.my-slider-group .my-silder-itemend...
用nowrap實現div內的元素不換行
在編寫自定義外掛程式my slider的過程中,發現無論float還是inline block均不能保證div內的內容不換行 這兩個屬性在內容超出容器尺寸後,均將剩餘內容做換行處理 在瀏覽器內比較了自己定義的my slider item和mui框架定義的mui slider item,發現其用了 w...
div內的屬性總結
1 style 設定css樣式 擴充套件了解style標籤 2 align 設定div盒子內的內容居中 居左 居右 3 id 引人外部對應 井號 選擇符號樣式 4 class 引人外部對應.句號 選擇符號樣式 5 title 設定div 標題 滑鼠經過時顯示文字 擴充套件了解 title標籤 col...
用div實現框架(排除frame)
frame中巢狀一iframe 之間的分隔條 也可以拖動 但是地圖會發生改變 移到我上面 aaabbb cccdocument的使用 document.getelementbyid id1 style.display none document.all.id1 同 document.geteleme...