Question

我一直在网站上工作，陷入困境我在单个ul里面有各种各样的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/
谢谢你的时间，我希望我不仅仅是愚蠢而且不直接看＆gt;。＆lt;

Answer 1

在您的li中执行float:left并为li设置宽度，对于ul也有overflow:hidden

Answer 2

我并不完全确定你所指的是什么，但鉴于你正在使用inline-block我会假设你得到了一些额外的空白而你不确定它会在哪里来从

如果您使用inline-block，则会在元素之间保留精简空白区域，因此您需要确保开始和结束标记之间没有空格字符（</li>和{ {1}}）。 Newlines也很重要。

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

Here is a fiddle with a demo of what I'm talking about

CSS李不排队。可能是循环问题

2 个答案: