Listitems 的行为真的很奇怪答案

【问题标题】：Listitems are acting really weirdListitems 的行为真的很奇怪
【发布时间】：2013-02-01 17:50:52
【问题描述】：

我有一个网站，http://www.veluwenkamp.nl 在主页底部，您可以找到 4 个列表项（图片）它们对齐得不是很好，它必须在一条水平线上。

我尝试了一切，但我无法让它工作。大家能给我一些建议吗？

提前致谢，

【问题讨论】：

【解决方案1】：

您可以通过将clear: both 添加到您的ul 来解决此问题

.lijstul {
    clear: both;
    ...
}

【讨论】：

感谢您的出色解决方案！

【解决方案2】：

使用display:inline-block

.lijstul li{display:inline-block}

DEMO

【讨论】：

【解决方案3】：

在列表前添加<div style="clear:both"></div>。

<div style="clear:both"></div><ul class="lijstul">
<li class="lijstil">
<div class="portfolio-blockimg3">
<div class="portfolio-imgbox3"><img class="boximg-pad" src="http://www.veluwenkamp.nl/wp-content/themes/veluwenk/timthumb.php?src=http://www.veluwenkamp.nl/vknieuw3/wp-content/uploads/2012/10/picisto-20121022090807-597254.jpg&amp;h=86&amp;w=196&amp;zc=1" alt=""></div>
</div>
</li>
<li class="lijstil">
<div class="portfolio-blockimg3">
<div class="portfolio-imgbox3"><img class="boximg-pad" src="http://www.veluwenkamp.nl/wp-content/themes/veluwenk/timthumb.php?src=http://veluwenkamp.nl/afbeeldingen/IMG_1359.jpg&amp;h=86&amp;w=196&amp;zc=1" alt=""></div>
</div>
</li>
<li class="lijstil">
<div class="portfolio-blockimg3">
<div class="portfolio-imgbox3"><img class="boximg-pad" src="http://www.veluwenkamp.nl/wp-content/themes/veluwenk/timthumb.php?src=http://www.veluwenkamp.nl/vknieuw3/wp-content/uploads/2012/11/sgfw-30.jpg&amp;h=86&amp;w=196&amp;zc=1" alt=""></div>
</div>
</li>
<li class="lijstil">
<div class="portfolio-blockimg3">
<div class="portfolio-imgbox3"><img class="boximg-pad" src="http://www.veluwenkamp.nl/wp-content/themes/veluwenk/timthumb.php?src=http://www.veluwenkamp.nl/vknieuw3/wp-content/uploads/2012/10/20090619_3844_6.jpg&amp;h=86&amp;w=196&amp;zc=1" alt=""></div>
</div>
</li>
</ul>

你会得到对齐

【讨论】：

【解决方案4】：

ul.lijstul {
 width: 100%;
 overflow: hidden;
}

【讨论】：

【解决方案5】：

请说清楚：都到 ul 类 .lijstul 并尝试

【讨论】：