如何正确对齐页脚文本

Question

这是我的网站页脚。当你看到它没有很好地对齐。我只需要对齐文本。列表标题和子列表应该以相同的对齐方式排列。我怎样才能做到这一点 ？我用过UL和LI

Answer 1

由于您在display:inline元素上使用UL，因此您需要添加vertical-align:top。

Answer 2

您需要以下CSS：

* {
    margin:0;
    padding:0;
}

#footer {
    background-color: rgb(70,221, 93);
    height:250px;
    padding:40px 0;
    width:100%;
}

#footer > div {

    text-align:center;
    width:24%;
    display:inline-block;
    vertical-align:top;     /* See this line its important for all the 'headers' to align properly */
}
#footer > div > span {
    margin:0 0 30px 0;
    display:block;
    font-weight:bold;

}

a {
    display:block;
    color:White;
    text-decoration:none;
    margin-bottom:10px;
}

请在此处查看：http://jsfiddle.net/StARu/

希望这有帮助!!!