3

所以，我有一个列表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/

我的问题类似于大于 100% 的 CSS 动态宽度，除了我的子元素没有浮动，因此仍在流程中（我对此有控制权）。

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

4

3 回答 3

3

除非我误解了您的问题，否则您可以简单地添加white-space: nowrap;到您的ul（小提琴）中。然后，您将在溢出时获得所需的水平滚动条。

[编辑]：和text-align: center;你的div（小提琴）

于 2012-12-17T19:48:29.633 回答
1

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

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

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

于 2012-12-17T19:45:50.073 回答
0

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

​</p>

于 2012-12-17T19:48:50.597 回答