Question

所以，我有一个inline-block列表项列表。它们的宽度各不相同，但总是在同一条线上。列表项的数量也可能不同，因此我无法预测整个列表的宽度。列表应该始终以其父容器为中心，但是当宽度超过100％时，它应该获得水平滚动而不是延伸两行。

现在，据我了解，如果我将width设置为auto，它实际上设置为shrink-to-fit - 本质上意味着max-width: 100%;，这不是什么我想要。

有没有办法让我单独使用CSS可靠地实现这一目标？

标记

<div>
  <ul>
    <li>Banana</li>
    <li>Krypton</li>
    <li>Molten boron</li>
  </ul>
</div>

CSS

div {
  overflow-x: auto;
  width: 500px;
}
ul {
   max-width: 5000px; /* Doesn't override */
   width: auto; /* Calculated to 500px or less */
}
li { display: inline-block; }

应该注意的是，这是一个响应式布局，所以容器的宽度并没有完全固定，但我不怕手工劳动。

我的JS小提琴：http://jsfiddle.net/TheNix/gdRaB/

我的问题类似于CSS dynamic width larger than 100%，除了我的子元素没有浮动，ergo仍然在流程中（我已经控制了它）。

关于规范中的width: auto;：http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

Answer 1

除非我误解了您的问题，否则您只需将white-space: nowrap;添加到ul（fiddle）即可。然后，您将在溢出时获得所需的水平滚动条。

[修改]：和text-align: center;到div（fiddle）

Answer 2

我认为你想要的是最小宽度，而不是最大宽度

ul {
   **min-width: 5000px;** /* Doesn't override */
   width: auto; /* Calculated to 500px or less */
}

http://jsfiddle.net/gdRaB/5/

Answer 3

http://jsfiddle.net/gdRaB/10/

我把div放在容器div中

<div class="container">
<div class="list">
    <ul>
        <li>Banana</li>
        <li>Molten Boron</li>
        <li>Steak sauce</li>
        <li>Unicorn tears</li>
        <li>Ground-up griffins</li>
        <li>Semi-alive hobgoblins (frozen)</li>
    </ul>
    </div>
</div>



.container{
    width: 500px;
    overflow: auto;}

.list{
    width: 5000px;
}

ul {
    width: 5000px;
    overflow: visible;
    width: auto;
    display: inline-block;
}

li {
    background: #ccc;
    display: inline-block;
    margin: 0 5px;
    padding:2px 5px;
}

应用最大宽度大于100％

3 个答案: