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

I am trying to align a set of images horizontally within a div tag and then display a horizontal scroll bar when the images exceed the length of the div tag. I am relatively new to CSS and have tried everything I can think of. The below code displays my images vertically!!!

我试图在div标签内水平对齐一组图像,然后在图像超过div标签的长度时显示水平滚动条。我是CSS的新手,并尝试过我能想到的一切。以下代码垂直显示我的图像!

Thank you very much for any help.

非常感谢您的帮助。

Inside the body tag:

身体标签内:

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

2 个解决方案

#1

Link to fiddle. I also changed the image urls to point to something that exists

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

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

Here is what I added:

这是我添加的内容:

To get the images to display horizontally

使图像水平显示

.imagelist li{
  display: inline;
}

And this will make a horizontal scroll appear if the images extend past the width of #TNBox

如果图像超出#TNBox的宽度,这将使水平滚动显示

#TNBox{
  white-space:nowrap;
}

#2

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

Preview >> jsfiddle (I have styled images too)

预览>> jsfiddle(我也有样式图像)

#1