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

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

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

我在玩显示器。但它的行为不像我想的那样

HTML:

我需要有水平滚动条可见，而不是垂直的。大概是这样的： 演示-

设置li的悬停，因为您已将li设置为表格单元格样式

---

要防止包装，请使用：

white-space:nowrap;

在你的保险单上

---

要添加溢出-y：隐藏；要设置框和设置高度，还需要将内部跨距显示为：inline block，以便它们可以容纳附加的尺寸。

谢谢，但这并不能解决我的问题。我需要li元素具有相同的定义高度，以便框显示其水平滚动条。ya我只将a:hover{background color:blue；}更改为li:hover{background color:blue；}@behnil这对我不起作用。li元素必须具有定义的高度。@Behnil…它们有吗？它们都是指定的50px。你能详细说明什么不起作用吗？文本从一个li重叠到另一个li。请看一看我编辑的问题，其中的图像显示了所需的行为。@Behnil-simpyl从li中删除“最大宽度”设置，或根据需要添加“溢出：隐藏”

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

li:hover {
  background-color: blue;
}

white-space:nowrap;

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