html - 页脚中的列

Question

我正在尝试复制 this 的页脚网站作为学校元素的一部分。到目前为止，我发现我的 div 应该像这样构造:

    <div class="wrapper">
        <div class="top-side">...</div>
        <div class="content">...</div>
        <div class="footer">
            <div class="footer-col">
                <h4>Column header</h4>
                <ul>
                    <li>list item1</li>
                    <li>list item2</li>
                </ul>                    
            </div>
        </div>
    </div>

我使用的 css 是:

.wrapper .footer {
    bottom:0;
    width:100%;
    margin: 5px;
    color: #FFFFFF;
    background-color: black;
}

.footer .footer-col {
    display: block;
    float: left;
    margin: 0 20px 0 0;
    width: 20%;
}

.footer .footer-col ul {
    list-style: none;
    display: inline;
    overflow: hidden;
}



.wrapper .footer .clear {
    clear: both;
}

这是我到目前为止的全部代码。我无法弄清楚应该向我的 css 添加什么才能使它按照预期的含义工作，每列中的每个元素左对齐，每列的标题为 bold。 (我已经用 <h4> 解决了这部分)

有什么建议吗？

Answer 1

如果您想复制您所说的网站的相同 footer，我认为一个好的方法是也复制一个类似的 HTML 结构。

在这种情况下，使用浏览器检查器检查代码，您将看到它是 5 组标题 h4 + ul 列表。

Here's a hint to do it in a JSFiddle I've made.

CSS

.container {overflow: hidden; background: #000; color: #fff; }
.footer-tab { float: left; width: 20%; font-family: Arial; }

ul { padding-left: 0; }
ul li { list-style: none; margin: 10px 0; font-size: 12px; }
ul li a { font-weight: bold;  }

我没有编写所有代码，但我认为您可以看到一个更好的结构来实现它。