1

プロジェクトの場合、左側にメニューボタンが浮かび、右側に「トップに戻る」ボタンがある（モバイル）ナビゲーションバーがあります。ナビゲーションバーの中央にロゴを配置したい。現在、順序付けられていないリストを使用しています。

HTML は基本的に次のようになります。

<div class="navbar">
    <ul>
          <li class="navmenu"><i class="icon-menu"></i></li>
          <li class="mobilelogo"><a href="#top"><img class="moblogopic" src="media/navbarlogo.png" alt="logo"/></a></li>
          <li class="up-icon" title="Back to top"><a href="#top"><i class="icon-up"></i></a></li>
    </ul>
</div>

CSS は次のようになります。

.navbar{
 width:100%;
 height: 45px;
}
.navbar ul{
 padding: 0 10px;
}
.navmenu{
 display:inline;
 float: left;
}
.mobilelogo{
 display:inline;
 float:left;
 margin: 0 auto;
}
.up-icon{
 display: inline;
 float:right;
}

マージン: 0 自動; 動作しないようです。margin-left: 50% のようなものは使用できません。これは、サイトがレスポンシブである必要があり、サイズ変更によって問題が発生するためです。現在、ナビゲーション バーは次のようになっています。 ロゴ付きのモバイル ナビゲーション バー

4

1 に答える 1

1

次に、幅を設定する必要があります..：

.navbar{
 width:100%;
 height: 45px;
}
.navbar ul{
 padding: 0 10px;
}
.navmenu{
 display:inline;
 float: left;
 width:20%;
}
.mobilelogo{
 display:inline;
 float:left;
 margin: 0 auto;
 width:60%;
 text-align:center;
}
.up-icon{
 display: inline;
 float:right;
 width:20%;
}
于 2013-05-29T20:05:00.357 に答える