css - 带水平滚动条的无序列表

Question

我想要一个 UL 列表，但它的元素向左浮动，并且列表具有固定的高度和宽度。

我现在拥有的：

ul { 
width: 230px;
height: 30px;
overflow-x: scroll;
}

li { 
float: left;
display: inline 
}

HTML：

<ul id="dev">
  <li>el</li>
  <li>el</li>
</ul>

元素浮动正常，但滚动条不起作用（灰显）并且元素将进入新行。我能做些什么？

Answer 1

将white-space属性设置为nowrap在列表上，然后float: left在列表元素上禁用。

ul { 
  /* ... */
  white-space: nowrap;
}

li { 
  display: inline;
}

Answer 2

ul {
    width: 230px;
    height: 30px;
    overflow-x: scroll;
    white-space: nowrap;
}

li {
    display: inline-block;
}