Question

我试图在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;
}

Answer 1

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

预览＆gt;＆gt; jsfiddle（我也设置了图片样式）

Answer 2

链接到小提琴。我还将图片网址更改为指向存在的内容

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

以下是我添加的内容：

让图像水平显示

.imagelist li{
  display: inline;
}

如果图像超出#TNBox

的宽度，这将使水平滚动显示

#TNBox{
  white-space:nowrap;
}

如何在CSS中水平对齐我的Thumb Nail图像？

2 个答案: