Question

我想创建一个显示一些图像的固定布局。例如，连续3个图像和列中3个图像的“表”。此外，我需要每个li都有一些固定的宽度和高度，图像居中，alignet到顶部。

所以我想到了这样的事情：

<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>
<ul>
<li><img /></li>
<li><img /></li>
<li><img /></li>
</ul>

但是我不知道css，我仍然创造了一些像这样的但仍然不起作用......

ul {display: block; text-align: center; border:#666666 solid 1px; height: 150px; padding:0; margin:0;}
li { list-style:none; float:left; width: 150px; height: 150px; margin-bottom: 32px;}

修正版：

ul{ height: 180px; text-align:center;padding:0;}
li{list-style:none;padding:0;width: 25%;height: 180px;float: left; display:inline-block;}

注意：仅适用于只有<ul>个<li>的{{1}}，设置的列会更改<li>的宽度。 25％表示4列，33％= 3列等。公式：100 /（所需列）。

Answer 1

你几乎就在那里。我所做的所有工作都已移除float: left;，并将其替换为display: inline-block;标记上的<li>。这对我来说非常完美。如果您对垂直对齐有任何疑问，请尝试在<img>代码上设置以下内容：vertical-align: top;

Mozilla WebDev博客上有一篇关于解决这个问题的文章：Cross-Browser Inline-Block

Answer 2

我已经制作了带有列表标签的3x3盒子并上传了here，希望它可以帮助你Sein。

<强> CSS：

<style type="text/css">
    ul { list-style-type:none; margin:0px; padding:0px; overflow:hidden; }
    li { float:left; width:150px; height:150px; margin:2px; padding:3px; background:#CCCCCC; text-align:center; }
    li img { max-width:144px; }
</style>

<强> HTML：

<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>
<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>
<ul>
    <li><img src="" /></li>
    <li><img src="" /></li>
    <li><img src="" /></li>
</ul>

如何用css创建多列列表？

2 个答案: