中断文本内联列表

Question

我遇到水平列表问题。我在800px ul内有200px大小的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;
}

有点难以描述..请参阅小提琴：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;