如何在CSS中水平对齐拇指指甲图像？

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

非常感谢你的帮助

在body标签内：

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

和CSS：
#TNBox{
宽度：500px；
高度：88px；
边框：1px纯黑；
位置：绝对位置；
左：50px；
顶部：320px；
溢出-x：自动；
显示：内联块；
文字装饰：无；
}
.imagelist{
列表样式：无；
边际：0px；
填充：0px；
}

预览>>（我也为图像设置了样式）

---

预览>>（我也对图像进行了样式化）

链接到fiddle。我还更改了图像URL以指向存在的内容

我补充说：

使图像水平显示的步骤

.imagelist li{
  display: inline;
}

如果图像超过#TNBox的宽度，则会出现水平滚动

---

链接到小提琴。我还更改了图像URL以指向存在的内容

我补充说：

使图像水平显示的步骤

.imagelist li{
  display: inline;
}

如果图像超过#TNBox的宽度，则会出现水平滚动

---

请改写您的问题标题——“TN”通常代表田纳西州，而不是“缩略图”。此外，请将您的问题转换为JSFIDLE。访问jsfiddle.com，输入代码，点击共享，发布生成的链接。感谢您的反馈。我现在已经这样做了。我是论坛（和CSS）的新手。我会在以后的帖子中这样做。请改写你的问题标题——“TN”通常代表田纳西州，而不是“缩略图”。另外，请将你的问题转换成JSFIDLE。访问jsfiddle.com，输入代码，点击共享，发布生成的链接。感谢您的反馈。我现在已经这样做了。我是论坛（和CSS）的新手。我将在以后的任何帖子中这样做。madhushankarox，非常感谢你的帮助。我的指甲是水平对齐的！madhushankarox，非常感谢你的帮助。我的指甲是水平对齐的！

#TNBox{
  white-space:nowrap;
}