html - 如何防止 float 列表元素换行

Question

当父 div 设置为固定大小时，如何使相邻 float 的列表元素不换行？

此外，我需要 li 元素具有相同的固定高度。它们可以有不同的宽度。

我正在玩 table-cell展示。但它的行为并不如我所愿。

HTML:

<div id="box">
    <ul>
        <li><a><span>gfh gf hfg hf gdfg gdf gdf</span></a></li>
        <li><a><span>dfgdf g dfg dg dfgddfdfdgdf gdfg dfgdf gdf g dfg</span></a></li>
        <li><a><span>dfg dfgdf gdfgdf gdf</span></a></li>
        <li><a><span>Lehce delsi  fghfg hfgdfg dfg d d d</span></a></li>
    </ul>
</div>

CSS:

#box {
    width: 400px;
    height: 50px;
    border: 1px solid black;
    background-color: green;
    overflow: auto;
}
ul {
    display: table-row;
    margin: 0;
    padding: 0;
    height: 50px;
    list-style: none;
}
li {
    display: table-cell;
    max-width: 150px;
}
a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
a:hover {
    background-color: blue;
}

我需要让水平滚动条可见，而不是垂直滚动条。是这样的:

Answer 1

演示 - http://jsfiddle.net/uhL9e3ec/1/

为 li 设置 hover 因为你已经将 li 设置为 table-cell

li:hover {
  background-color: blue;
}