Question

我试图用4列做一个页脚，我希望2列保持在上面而其他列在theese列之下。

我已经成功了，但是现在我在我的div＃footer1的中心对齐我的4列时遇到了一些困难。

我试试这个：http://jsfiddle.net/GM23h/2/（使用保证金：0自动）

我的HTML：

<footer class="footer-container">
    <section class="footer1">
         <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 
        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

        <div class="col">
            <h1>Contacts</h1>
            <ul>
                <li><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
                <li ><a href="#">&nbsp;&nbsp;0000 0000 0000</a></li>
            </ul>
       </div> 

    </section>
  </footer>

我的css：

.footer-container
{
    width:100%;
    height:auto;
    float:left; 
} 

.footer1
{
    width:600px;
    margin:10px auto 10px auto;
    background:gray;
    overflow:hidden;
}

.footer1 ul 
{
    list-style:none; 
}


.footer1 ul li
{
    margin:0 0 7px 0;
}

.footer1 ul li a 
{   
    text-decoration:none;
}

.col
{
    float:left;
    margin:10px 10px 10px 10px;
    width:270px;
    height:155px;
    background:yellow;
}

.col h1
{
    border-bottom:1px dashed #ccc;
    color:#fff; 
    font-size:14px;
    margin-bottom:10px; 
    width:160px;
}

Answer 1

添加到您的.footer1 CSS课程：

text-align: center;

并替换您的.col CSS类

float:left;

用

display:inline-block;

Example

问题是我的页脚在中心对齐4列

1 个答案: