中断文本内联列表

Question

水平列表有问题。我在 800 像素的 ul 中有 200 像素大小的 li 元素。我希望 ul 水平滚动，并且 li 内的文本中断。这会导致 li 元素失去其垂直位置。

HTML:

 <div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three three three three three three three three three three three three three three three three</li>
        <li>four</li>
    </ul>
</div>

CSS:

ul {
    width: 600px;
    height: 400px;
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
li {
    width: 150px;
    height: 150px;
    display: inline-block;
}

有点难以描述。请参阅 fiddle：https://jsfiddle.net/yrLtsLrf/

Answer 1

将 vertical-align: top; 添加到您的 li。

Answer 2

这应该可以，您需要

vertical-align:top

并添加到 li

whitespace:normal

jsfiddle

Answer 3

在下面添加 css 到 li 即可。

overflow-x: scroll;
overflow-y: hidden;

中断文本内联列表

Break text inline list

css

scroll

inline

list

overflow