使用水平滚动条制作单行div [英] make a single row of divs with horizontal scroll bars

问题描述

好吧，所以我以为我有这个固定使用白色空间：no-wrap
它在Chrome中工作，但没有其他。

Ok so I thought I had this fixed using white-space:no-wrap it worked in chrome but nothing else.

this：

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

原因是真的很差的图像，但这是目标的效果。

excuse the really poor image but this is the efect im aiming for.

我想要单行的items，如果他们超过空格，然后水平滚动条应该出现。

I want a single row of 'items' if they exceed the space then horizontal scroll bars should appear.

希望这是有道理的，我怎么能实现这一点？

hope that makes sense, how can i achieve this?

推荐答案

这样写：

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

这篇关于使用水平滚动条制作单行div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！