如何防止浮动列表元素换行

Question

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

此外，我需要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/

为hover设置li因为您将li设为table-cell

li:hover {
  background-color: blue;
}

Answer 2

防止包装使用：

white-space:nowrap;

在ul

上

ul {
    display: table-row;
    margin: 0;
    padding: 0;
    height: 50px;
    list-style: none;
    white-space:nowrap; /* <--- this */
}

Demo Fiddle

要hide the vertical scrollbar将overflow-y:hidden;添加到#box，并设置权限，您还需要使内部跨度display:inline-block，以便他们可以保留附加的尺寸。