Question

我正在玩jsfiddle，我试图在页脚中居中（在我的情况下，四个）无序列表（我经常看到网页有这些日子）。

如何使用边距和填充来使这些无序列表显示为居中（最右边和左边<ul>左右边距相等），并且在...之间使用相等的填充列表？

html代码：

<div class="mainContent">
    <header class="header">
        <h1>Header</h1>
    </header>
    <div class="content">
        <p>Content...</p>
    </div>
    <footer class="footer">
        <p> &copy Footer</p>
        <hr>
        <div class="footerLists">
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </footer>
</div>

CSS代码：

    .mainContent {
        width: 80%;
        margin: 0 auto;
    }

    .header {
        border: 2px solid red;
    }

    .content {
            border: 2px solid red;
    }

    .footer {
        height: 200px;
        border: 2px solid red;
    }

    .footer ul {
        float: left;
        list-style: none;
    }

    .footer hr {
        width: 80%;
    }

    .footerLists {
        width: 80%;
    }

Answer 1

我不完全确定你想要实现的目标是网格布局吗？它听起来像是，在这种情况下......你需要一个网格：）

而不是过于复杂并且抓住网格框架 - 其中有数百个 - 了解网格如何工作很有用，因为您可以直接将这些知识应用到您的网站页脚。

我遇到的最好的文章之一是“不要过度思考网格” http://css-tricks.com/dont-overthink-it-grids/

如果你认为你的四个列表只是25％宽的列，那么你的战斗就会赢得一半。无论您的容器元素是像素还是百分比，基于百分比的网格都将整齐地位于其中。

Answer 2

我已经编辑了你的jsfiddle。请检查以下代码：

.mainContent {
 width: 80%;
 margin: 0 auto;
 text-align:center;
}

.header {
 border: 2px solid red;
}

.content {
    border: 2px solid red;
}

.footer {
 height: 200px;
 border: 2px solid red;
}

.footer ul {
 float: left;
 list-style: none;
 width: 80%;
}

.footer hr {
 width: 80%;
}

.footerLists ul {
 width:13%;
}

我如何将无序列表放在页脚中？

2 个答案: