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、正确代码
<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>
就是加了white-space:nowrap;而已。
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;