css - 中断文本内联列表

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。