Question

我一直在寻找相当长的一段时间，试图找到这个特定问题的解决方案。

我有一个位于容器外部的页脚，这样我就可以在页面上展开页脚，而不会粘贴到宽度为960px的父div。

当我尝试在页脚

中创建3列居中列表时，这会导致问题

我无法发布我测试过的所有代码，但这就是我现在所拥有的代码 -

CSS

#footer {
width:100%;
text-align:center;
background-color:grey;
margin:0 auto;
overflow:hidden;}

HTML：

        <div id="footer">
        <div class="col">
        <h2>recent entries</h2>
          <ul>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
          </ul>
        </div>
        <div class="col2">
          <h2>recent comments</h2>
          <ul>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
            <li><a href="#">3 Column Footer Example</a></li>
           <li><a href="#">3 Column Footer Example</a></li>
          </ul>
        </div>
        <div class="col3">
          <h2>featured on</h2>
          <ul>
            <li><a href="#'">3 Column Footer Example</a></li>
            <li><a href="#'">3 Column Footer Example</a></li>
            <li><a href="#'">3 Column Footer Example</a></li>
            <li><a href="#'">3 Column Footer Example</a></li>
            <li><a href="#'">3 Column Footer Example</a></li>
            <li><a href="#'">3 Column Footer Example</a></li>
            <li><a href="#'">3 Column Footer Example</a></li>
          </ul>
        </div>
    </div>

这是当前情况的一个方面（介意页脚宽度跨越整个页面并且位于内容容器之外）

http://jsfiddle.net/2DUaZ/

我是新手，因此我很难区分出如何并行地将这些列表集中在一起。

我知道你不能准确地居中浮动，所以我认为绝对定位将是解决方案，但到目前为止我只找到了死角。

有人可以帮忙吗？

Answer 1

JSFIddle DEMO

不会添加这项工作吗？：

#footer div {
    width:33%;
    display:inline-block; 
}

Answer 2

你可以将它们漂浮在左边吗？

.col {
   float:left;
}

http://jsfiddle.net/2DUaZ/4/

如果您想将它们居中，可以使用另一个div支架，您可以使用它：

margin: auto auto;

http://jsfiddle.net/2DUaZ/7/

Answer 3

做一个简单的事情：

CSS：

#footer div {
    display: inline-block;
}

DEMO HERE

Answer 4

完美运作

.col, .col2, .col3 {
float: inline-block; 
width: 33%;
}

中心页脚列表

4 个答案:

CSS：