0

再会

我有一个糟糕的 CSS 日。我有 3 列 div（水平，这就是我使用浮点数的原因），但我想将我的文本对齐在中心，但在包含列 div 的左侧。

HTML：

 <div id="footer">
        <div class="footerColumn">
            <ul>
                <li><a>Contact Us</a></li>
                <li><a>Home</a></li>
                <li><a>Emergency Numbers</a></li>
            </ul>
        </div>
        <div class="footerColumn">
            <ul>
                <li><a>Support</a></li>
                <li><a>Privacy Policy</a></li>
                <li><a>Terms of Use</a></li>
                <li><a>Careers</a></li>
            </ul>
        </div>
        <div class="footerColumn">
            <ul>
                <li><p><a>login</a></p></li>
                <li><a>Sign Up</a></li>
            </ul>
        </div>
        <div style="clear: both;"></div>

 </div>

CSS：

#footer {
    width: 960px;
    margin: 0 auto;
    padding: 10px;
    background: url('/images/bg2.png') repeat-x center;

    border-top: 6px solid #f3911f;
    background: #1b1d21;
}
    #footer div.footerColumn {
        position: relative;
        float: left;
        width: 33%;
        margin: 0 auto;
        text-align: justify;
    }
    #footer div.footerColumn ul li {

    }
    #footer ul li a{
        color: #fff;           
        font-family: Arial, sans-serif;
        font-size: 14px;
        text-decoration: none;
        cursor: pointer;       
    }
    #footer div.disclaimer {
        color: #ccc;
        font-family: verdana, Arial, sans-serif;
        font-size: 12px;

    }

看我的小提琴

谢谢

4

3 回答 3

2

您无法<ul>在设计中将元素居中的原因是元素将父宽度<li>拉伸到 100%，因此无法使用。<ul>margin: 0 auto

相反，我建议你使用display: inline-block你的<ul>- 允许它只拉伸到内部内容（子<li>元素）的宽度，而不是包含元素的 100% 宽度。

至于 children <li>，您可以将它们设置为显示为块元素，将它们浮动到左侧然后清除左侧浮动，因此强制每个浮动元素从新行开始（因为您清除了每个元素的左侧浮动） .

只需实现以下建议的样式：

#footer ul {
    display: inline-block;
    overflow: hidden;
}
#footer ul li {
    display: block;
    float: left;
    clear: left;
}
#footer ul li a{
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;       
}

在这里检查小提琴;）http://jsfiddle.net/teddyrised/DvXzB/48/

于 2013-02-27T10:07:30.113 回答
0

text-align:center在您的 footerColumn div 中使用。

   #footer div.footerColumn {
        position: relative;
        float: left;
        width: 33%;
        margin: 0 auto;
        text-align: center;
    }
于 2013-02-27T09:15:15.517 回答
0 
#footer div.footerColumn {
    position: relative;
    float: left;
    width: 33%;
    margin: 0 auto;
    text-align: center; /*new here*/
}
#footer div.footerColumn ul {
float: left; /*new here*/
}
于 2013-02-27T09:18:45.527 回答