css - 创建一个 4x3 的 CSS 面板网格

Question

我正试图找到一个 CSS 教程，使我能够创建一个 4x3 的功能网格，就像在这个网站上一样 http://www.ewedding.com/features.php

如果有人能推荐一个就好了!我发现的所有教程似乎都为整个页面设置了样式，而不是页面的特定部分。

提前致谢

德布拉德

Answer 1

您链接的页面使用 UL 作为外部元素，使用 LI 作为内部元素，因此您拥有:

<ul>
    <li>Feature1.1</li>
    <li>Feature1.2</li>
    <li>Feature1.3</li>
</ul>
<ul>
    <li>Feature2.1</li>
    <li>Feature2.2</li>
    <li>Feature2.3</li>
</ul>
<ul>
    <li>Feature3.1</li>
    <li>Feature3.2</li>
    <li>Feature3.3</li>
</ul>

使用这样的 CSS 定义:

ul{
    float:left;
    width: //specify the width
    display:block;
}

li{
    list-style: none;
    display:block;
}

等等

也就是说，我认为 CSS 表格布局对此更好:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout