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

Question

我有一个固定元素锁定在页面底部，横跨整个窗口宽度。这个元素中有两个 float 元素(它们在实际代码中是明确固定的，但不是在 fiddle 中)。最右边的元素是固定宽度的，最左边的元素的宽度由 css calc 决定。最左侧元素的子元素明显比它宽，但不会导致出现溢出滚动条。

fiddle :http://jsfiddle.net/hMgR5/3/

现在，一种可能的解决方案是放弃 native 浏览器对滚动的支持并在查看元素的两侧添加我自己的滚动按钮，但我更愿意尽可能使用浏览器对滚动的 native 支持，除非用户体验这样做效果很差。

编辑:问题是子元素的高度与固定位置元素的高度相同。因此，滚动条呈现在固定元素下方，阻止用户与其交互。可能需要一个更明智的解决方案:可能取消 float 并移动到在溢出元素末尾填充填充的绝对定位可能会更好。

标记:

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

样式:

*{
box-sizing: border-box;
font-size: 1em;
font-weight: bold;
color: white;
}

.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
}

.other-bar-item{
float: left;
width: 200px;
text-align: center;
}

.viewer{
float: left;
width: calc(100% - 200px);
overflow-x: auto;
}

.list{
margin: 0;
padding: 0;
width: 2000px;
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;
}

Answer 1

这是链接:jsfiddle

你不必为你的 ul 设置高宽度，

你可以设置 white-space: nowrap;到父元素并为其子元素设置内联 block 显示。这将迫使父级根据需要变得尽可能宽。

而且你不需要设置 overflow: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;
}