Question

我正在尝试根据内容宽度开发div水平滚动。但那不是很完美，请帮助我。如果我将ul宽度设置为特定px但不是 auto

，则此方法有效

这是我的CSS和HTML

.sri{
width:550px;
height:40px;
margin:auto;
padding:0px;
overflow-x:scroll;
overflow-y:hidden;
}
.sri ul{
margin:0px;
padding:0px;
list-style:none;
width:auto;
}
.sri ul li{
width:auto;
margin:0px 5px;
padding:0px 5px;
float:left;
height:auto;
background:#CCCCCC;
color:#333333;
}

<div class="sri">
<ul>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>                                
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>
    <li>something content comes here</li>                
</ul>

Answer 1

在这种情况下最简单的修复方法是在width: 9999px上设置一个像.sri ul这样的巨大宽度：

Live Demo

糟糕：适用于IE8和Chrome，但不适用于Firefox / Opera。调查。

这是尝试＃2：

display: table和朋友是我能找到的唯一方法让这一点始终如一。

如果内容不超过550px，则不会有滚动条。

Live Demo

<强> HTML：

<div class="sri">
    <ul>
        <li>something content comes here</li>
        ..
    </ul>
</div>

<强> CSS：

.sri {
    width: 550px;
    height: 40px;
    margin: auto;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden
}
.sri ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table
}
.sri ul li {
    margin: 0 5px;
    padding: 0 5px;
    background: #ccc;
    color: #333;
    display: table-cell;
    white-space: nowrap
}

Answer 2

当UL的宽度设置为auto时，您看到的是浮动元素的自然行为。

2个选项：

1）您可以使用表而不是无序列表。无论容器宽度是多少，这都将水平放置。

2）您可以根据您拥有的元素数量（li的宽度* li的数量= UL的总宽度）动态设置UL的宽度。我猜，因为这个列表中有可变数量的项目可以生成列表服务器端吗？如果是这种情况，您应该可以很容易地设置UL宽度。

当没有足够的项目时没有滚动 - 只需设置overflow-x：auto;

div水平滚动不自动工作

2 个答案: