行內元素不換行的處理
阿新 • • 發佈：2019-02-07
1、程式碼
<div style="width: 100px;overflow: visible;"> <div style="display: inline-block;"> <ul style="display: inline-block;"> <li>亞洲</li> <li>歐洲</li> <li>北美洲</li> </ul> <ul style="display: inline-block"> <li>中國</li> <li>美國</li> <li>印度</li> <li>日本</li> </ul> </div> </div>
2、不想要的效果
3、上圖看得出已經換行了，不是我想要的效果；
為什麼會換行？ 兩個原因，第一：父元素寬度限制為100px，我們的內容可不止這麼點寬度；第二：white-space的預設取值為normal,什麼意思呢？父元素寬度不夠時換行唄; 那麼我想讓它不換行該怎樣做呢？ white-space:nowrap;這行css程式碼什麼意思？文字不會換行，文字會在同一行上繼續，直到遇到 <br> 標籤為止。4、正確程式碼
就是加了white-space:nowrap;而已。<div style="width: 100px;overflow: visible;"> <div style="display: inline-block;white-space: nowrap"> <ul style="display: inline-block;"> <li>亞洲</li> <li>歐洲</li> <li>北美洲</li> </ul> <ul style="display: inline-block"> <li>中國</li> <li>美國</li> <li>印度</li> <li>日本</li> </ul> </div> </div>
5、正確的效果
6、max-content
也可以使用width:max-content達到相同效果 相容寫法 width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
width: -ms-max-content;
width: max-content;7、專案效果
