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;
}