html – 用水平滚动条创建一行div

发布时间：2020-12-14 23:52:08 所属栏目：资源来源：网络整理

导读：好的,所以我认为我使用白色空间修复了这个问题：无包装它在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

好的,所以我认为我使用白色空间修复了这个问题：无包装
它在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>

原谅真正糟糕的形象,但这是我的目标.

我想要一行“项目”,如果它们超出空间,那么应该出现水平滚动条.

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

解决方法

像这样写：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!