行内元素不换行的处理

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;

7、项目效果