Html 强制固定元素内的div水平滚动

我有一个固定的元素被锁定在页面的底部，横跨整个窗口的宽度。该元素中有两个浮动元素（它们在实际代码中是固定的，但在小提琴中不是固定的）。最右边的元素的宽度是固定的，最左边的元素的宽度是由css计算确定的。最左边元素的子元素明显比它宽，但不会导致出现溢出滚动条

小提琴：

现在，一个可能的解决方案是放弃本机浏览器对滚动的支持，在查看元素的两侧添加我自己的滚动按钮，但如果可能的话，我更愿意使用浏览器对滚动的本机支持，除非用户使用这种方式的体验很差

编辑：问题是子图元的高度与固定位置图元的高度相同。因此，滚动条呈现在固定元素下，从而阻止用户与它交互。一个更精明的解决方案可能是必要的：可能取消浮动，移动到绝对定位，在溢出元素的末端填充，可能会更好

标记：

<div class="bottom-bar">
<div class="viewer">
    <ul class="list">
        <li class="element">Hello</li>
        <li class="element">World</li>
        <li class="element">Hello</li>
        <li class="element">World</li>
        <li class="element">Hello</li>
        <li class="element">World</li>
    </ul>
</div>
<div class="other-bar-item">
    Other Item
</div>

---

在我的mac电脑上，滚动条似乎是自己显示的，不确定PC为何不同，但要显示水平滚动条（但不是垂直滚动条），请将以下内容添加到查看器类中：

overflow-y: hidden;
height: 100%;

以下是链接：

您不必为ul设置高宽度

您可以设置空白：nowrap；为元素创建父元素并为其子元素设置内联块显示。这将迫使父对象的宽度达到所需的宽度

您不需要设置溢出：auto；由于父原因，它会自动执行该操作

代码如下：

.bottom-bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #1a1a1a;
    overflow-y: hidden;
    white-space: nowrap;

}

.other-bar-item{
    display: inline-block;
    width: 200px;
    text-align: center;
    background-color: red;
}

.viewer{
    display: inline-block;
}

.list{
    margin: 0;
    padding: 0;
    height: 40px;
}

.element{
    list-style: none;
    display: inline-block;
    width: 200px;
    height: 100%;
    position: relative;
    background-color: navy;
    border-right: 2px solid white;
    text-align: center;
}

---

你的意思是吗？看起来什么都没有改变：仍然没有滚动条。我正在使用chrome，我将切换到另一个浏览器，但它需要在chrome中工作。我会根据你需要的水平滚动条来更新OP，对吗？是的，我在firefox和IE中测试过，在那里也不起作用。我的小提琴里有一个水平滚动条。你需要在hello world部分下方的水平侧边栏。。正确的？？

.bottom-bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #1a1a1a;
    overflow-y: hidden;
    white-space: nowrap;

}

.other-bar-item{
    display: inline-block;
    width: 200px;
    text-align: center;
    background-color: red;
}

.viewer{
    display: inline-block;
}

.list{
    margin: 0;
    padding: 0;
    height: 40px;
}

.element{
    list-style: none;
    display: inline-block;
    width: 200px;
    height: 100%;
    position: relative;
    background-color: navy;
    border-right: 2px solid white;
    text-align: center;
}