CSS li 没有排队。可能是周期问题

Question

我一直在一个网站上工作，但遇到了障碍。
我在一个 ul 中有不同的 li。
我希望每个 li 都居中，而不是重叠它们现在的样子。希望改变 li 的宽度能让我选择每行有多少个。目前应该适合 4 个。
我正在使用 cycle 插件，但我查看了常见问题解答，但找不到任何内容这描述了我的问题（我认为）。
以下是一些代码：

<ul>
<li>
<a href="./portrait.php">
<h2>Portrait</h2><br />
<div class="slideshow">
<img src="./photos/Abstracted Portrait Study One_Thmb.png">
<img src="./photos/Angelic_Thmb.png">
</div>
</a>
</li>

<li>
<a href="./stilllife.php">
<h2>Still Life</h2><br />
<div class="slideshow">
<img src="./photos/Composition Study One_Thmb.png">
<img src="./photos/Composition Study Two_Thmb.png">
<img src="./photos/Composition Study Three_Thmb.png">
<img src="./photos/Light Bulb Study One_Thmb.png">
</div>
</a>
</li>

[...]

</ul>

CSS：

#portfoliotextarea li{
width: 200px;
text-align: center;
display: inline-block;
margin-left: auto;
margin-right: auto;
}

和 URL： http://www.duffydesigns.co .uk/portfolio/gallery/
谢谢您的宝贵时间，我希望我不只是愚蠢和看不清楚>。<

Answer 1

在你的 li 中做 float:left 并为 li 设置宽度，还为 ul 设置 overflow:hidden

Answer 2

我不完全确定你指的是什么，但考虑到你正在使用 inline-block 我会假设你得到了一些额外的空白，并且你不确定在哪里它来自。

如果您使用 inline-block ，则元素之间会保留压缩的空白，因此您需要确保开始标记和结束标记之间没有空格字符（< /li> 和

）。换行符也算在内。

此外，如果您希望所有元素居中，则需要在 ul 元素上声明 text-align center 。

这是一个小提琴，演示了我正在谈论的内容。