1

我试图在 div 标签内水平对齐一组图像，然后当图像超过 div 标签的长度时显示水平滚动条。我对 CSS 比较陌生，并且已经尝试了我能想到的一切。下面的代码垂直显示我的图像！！！

非常感谢您的帮助。

在正文标签内：

<div id="TNBox">
<ul class="imagelist">
    <li>
        <img id="tnimage1" src="images/tn-images/Rio-Street-Art-TN01.jpg">
    </li>
    <li>
        <img id="tnimage2" src="images/tn-images/Rio-Street-Art-TN02.jpg">
    </li>
    <li>
        <img id="tnimage3" src="images/tn-images/Rio-Street-Art-TN03.jpg">
    </li>
    <li>
        <img id="tnimage4" src="images/tn-images/Rio-Street-Art-TN04.jpg">
    </li>
    <li>
        <img id="tnimage5" src="images/tn-images/Rio-Street-Art-TN05.jpg">
    </li>
</ul>
</div>



And the CSS:

#TNBox {
    width: 500px;
    height: 88px;
    border: 1px solid black;
    position: absolute;
    left: 50px;
    top: 320px;
    overflow-x: auto;
    display: inline-block;
    text-decoration: none;
}
.imagelist {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
4

2 回答 2

3 
#TNBox{
    width: 500px;
    height: 88px;
    border: 1px solid black;
    position: absolute;
    left: 50px;
    top: 320px;
    overflow-x: auto;
    display: inline-block;
    text-decoration: none;
    white-space:nowrap;
}
.imagelist{
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.imagelist li{
    display:inline-block;
}

预览 >> jsfiddle（我也设置了图片样式）

于 2013-03-07T01:21:14.973 回答
2

链接到小提琴。我还更改了图像 url 以指向存在的东西

http://jsfiddle.net/GVdMz/2/

这是我添加的内容：

让图像水平显示

.imagelist li{
  display: inline;
}

如果图像超出#TNBox 的宽度，这将出现水平滚动

#TNBox{
  white-space:nowrap;
}
于 2013-03-07T01:32:37.307 回答