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>要素が親の<ul>幅を100％に拡大しているため、を使用しても機能しmargin: 0 autoないためです。

代わりに、-を使用することをお勧めしますdisplay: inline-block。<ul>これは、内部コンテンツ（子<li>要素）の幅までしか拡大できず、含まれている要素の100％の幅までは拡大できません。

子については<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 
#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 に答える
0

text-align:centerfooterColumndivで使用します。

   #footer div.footerColumn {
        position: relative;
        float: left;
        width: 33%;
        margin: 0 auto;
        text-align: center;
    }
于 2013-02-27T09:15:15.517 に答える