如何让多个li元素单行排列，并撑开ul宽度？

Question

dom结构div.containter>ul>li*10 （不一定是10个，视实际情况而定）

.container {width: 100%; overflow: hidden; white-space: nowrap}
.container ul li {display: inline-block; width: 60px;}

当li竖向排列时，是可以撑开高度的。但是横向时，无法撑开宽度。宽度一直为页面宽度。

最终目的是想横向滚动ul。

我的猜测：宽度是无法撑开的，需要自己给ul赋值一个宽度。比如(60 * 10)px （暂不考虑间隙）

请问我的猜测对吗？如果不对，该如何撑开？谢谢！

Answer 1

可以的

.container {width: 100%; overflow: auto; }
.container ul  {white-space: nowrap}
.container ul li {display: inline-block; width: 30%;}

Answer 2

ul的默认style是display：block

Answer 3

最终目的是想横向滚动ul。是需要固定ul的宽度的

实现这个的话,只要给ul固定宽度，设置横向滚动即可；单行排列可以使用 flex 布局，很方便

        ul{
            width: 100%;
            height: 100px;
            overflow-x: scroll;
            display: flex;
        }
        ul > li{
            width: 60px;
            height: 100%;
        }

<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>

Answer 4

我也遇到这个问题。
有个很容易忽略的地方--
块级父元素如果不设定宽度的话，就默认父元素宽度，如果需要子元素动态撑开父元素宽度，需要给父元素加上display:inline-block;