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

Question

我一直在做网站，遇到了麻烦。
我在一个 ul 中有多个 li。
我希望每个 li 都居中，而不是重叠它们现在的样子。希望更改 li 的宽度能让我选择每行有多少个。目前 4 个应该合适。
我正在使用 cycle plugin ，但我查看了常见问题解答，但找不到任何描述我的问题的内容(我认为)。
以下是部分代码:

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

还有网址:http://www.duffydesigns.co.uk/portfolio/gallery/
谢谢你抽出时间，我希望我不是在犯傻，没有看清楚 >.<

Answer 1

在你的 li 中执行 float:left 并为 li 设置宽度，同时为 ul 设置 overflow:hidden