如何用css创建多列列表？

我想创建一个显示一些图像的固定布局。例如，连续3张图像和一列3张图像的“表格”。此外，我需要每个锂conatins一些固定的宽度和高度和图像居中和alignet顶部。如何用css创建多列列表？

所以我鑫卡特在这样的事情：

<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>，列设置为更改<li>的宽度。 25％表示4列，33％= 3列等。公式：100 /（所需列）。

来源

2010-07-08 Sein Kraft

列表标签并上传here，希望它能帮助你塞林。

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>

来源

2010-07-08 09:50:40

非常感谢:-) – 2010-07-08 13:03:22

你几乎就在那儿。我所做的所有工作都被删除了float: left;，并在<li>标记上用display: inline-block;代替。这对我来说一切都很完美。如果您有垂直取向的任何问题，请尝试设置在<img>标签下面：vertical-align: top;

上有Mozilla的Webdev的博客以惊人的文章解决这个：我做了3×3盒Cross-Browser Inline-Block

来源

2010-07-08 04:27:46 desertwebdesigns

没错，但内联块不允许设置高度：P 但是好了，我已经解决了。固定在主帖子上。 – 2010-07-08 04:41:31

http://www.quirksmode.org/css/display.html#inlineblock - “一个内嵌块放在内联（即与相邻内容位于同一行），但它表现为一个块。”表现得像一个块意味着你可以设置一个特定的高度和宽度，我总是用水平导航菜单来完成。 – desertwebdesigns 2010-07-08 05:01:13

如何用css创建多列列表？

回答

相关问题