用水平滚动条创建一行div

Question

好的，所以我认为我使用白色空间修复了这个问题：没有换行 它在chrome中工作，但没有别的。

我有这样的事情：

<div class="outer">
    <ul>

        <li>
          <div class="inner">
            <a href="#"><img src="eg1.jpg" /></a>
            <br />
            EG1 lorem ipsum
           </div>
        </li>

        <li>
          <div class="inner">
            <a href="#"><img src="eg2.jpg" /></a>
            <br />
            EG2 lorem ipsum
           </div>
        </li>
.
.
.
//etc (multiple li's)

</ul>

</div>

原谅真正糟糕的形象，但这是我的目标。

如果超过空格我想要一行“项目”，那么应该出现水平滚动条。

希望有道理，我怎样才能做到这一点？

Answer 1

像这样写：

.outer{
    width:400px;
    overflow:auto;
    white-space:nowrap;
}
.outer li{
    display: inline-block;
    *display: inline;/*For IE7*/
    *zoom:1;/*For IE7*/
    vertical-align:top;
    width:40px;
    margin-right:20px;
    background:red;
    white-space:normal;
}

选中此http://jsfiddle.net/ZrpHv/

Answer 2

你需要将div.inner宽度设置为绝对像64px这样的东西，并使你的li向右或向左浮动，然后将父div的overflow-x属性设置为{{ 1}}。检查此fiddle

Answer 3

嗯，我知道每个善良而纯粹的网络开发者都会讨厌我（当我发布类似的东西时我讨厌我）但你可以简单地用表来做到这一点。

这适用于所有浏览器。是的，它不是标准的，不是不是CSS。但是......生产力有时比标准更好。

您还可以为容器使用固定的div宽度（ul）。并为所有孩子使用浮动左侧位置

Answer 4

你需要在父div中放置一个大的水平div：overflow：auto;这将允许向左浮动而不包裹到下一行，并且只有在超过父div的边界时才会滚动。