4

現在、テスト サイトの下部ナビゲーション バーを使用しています。問題は、ナビゲーション バーが適切に中央に配置されないことです。.left各ブロック リストを互いに並べて保持する属性を追加しました。この下部のナビゲーション バーを自動的に中央に配置するにはどうすればよいですか (追加されたリストの量に関係なく)。 例

ボトムナビゲーションに関するCSS

<style>
.bottomnavControls {
    padding-top:10px;
    padding-bottom:10px;
    padding-right:0;
    text-decoration:none;
    list-style:none;
}

#footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: #7a7a7a;
    border-bottom: 15px solid #000;
}
.left {
    float: left;
}
.right {
    float: right;
}

</style>

HTML

<div id="footer">
    <div class="bottomNav"> 
            <ul class="bottomnavControls left">
           <li style="padding-bottom:5px;"><b>Home</b></li>
           <li><a href=""  class="footer">Login</a></li>
            </ul>    

            <ul class="bottomnavControls left">
           <li style="padding-bottom:5px;"><b>Category</b></li>
           <li><a href=""  class="footer">Games</a></li>
            </ul>

           <ul class="bottomnavControls left">
          <li style="padding-bottom:5px;"><b>About</b></li>
          <li><a href=""  class="footer">Who We Are</a></li>
           </ul>

           <ul class="bottomnavControls left">
             <li style="padding-bottom:5px;"><b>Links</b></li>
             <li><a href="www.google.com" target="_new" class="footer">Google</a></li>
           </ul>

           <ul class="bottomnavControls left">
         <li style="padding-bottom:5px;"><b>Other Stuff</b></li>
             <li><a href=""  class="footer">Stuff</a></li>
          </ul>      
      </div>
</div>

私の現在のボトムナビゲーション：

ここに画像の説明を入力

私の望む結果：

ここに画像の説明を入力

4

1 に答える 1

4

の代わりにfloat、ここで使用する必要がありdisplay: inline-blockます。text-align: centerこのように、コンテナに置くことで簡単に中心に置くことができます.

.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }

leftクラスを削除します。

注: display: inline-block最新のブラウザーでは問題なく動作しますが、IE7 ではハックが必要です。

于 2012-08-09T23:06:30.207 に答える