メニュー整列センタリングと浮動小数点の問題

Question

私のサイトのヘッダーとナビゲーションは、私が望むように機能します。リンクとロゴのレイアウトは正しく調整されていません。

以下のようになります。

リンク - リンク - リンク----- -----ロゴリンク - リンク - ドロップダウン

リンク - を次のように表示されますがあり-link - ロゴ--------------ドロップダウン - リンク - リンク

ロゴは中央に配置されず、リンクの前にドロップダウンが表示されます右側に。

#siteHeader { 
 
    max-width: 1600px; 
 
    padding-top: 15px; 
 
    height: 93px; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    background-color: #000; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-top: 1px solid #d7d5d5; 
 
} 
 
#siteHeader a { 
 
    text-decoration: none; 
 
} 
 
.logo { 
 
    display: block; 
 
    height: 55px; 
 
    width: auto; 
 
    float: left; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: auto; 
 
    display: block; 
 
    float: left; 
 
    clear: right; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 6px 16px; 
 
    text-decoration: none; 
 
    float: left; 
 
} 
 
li a:hover { 
 
    background-color: #000; 
 
} 
 
.dropbtn { 
 
    background-color: #000; 
 
    color: white; 
 
    padding-top: 6px; 
 
    padding-bottom: 25px; 
 
    border: none; 
 
    cursor: pointer; 
 
    min-width: 100px; 
 
    text-transform: uppercase; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #434343; 
 
    min-width: 185px; 
 
    right: 0; 
 
} 
 
.dropdown-content a { 
 
    color: white; 
 
    padding: 13px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #000000 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    float: left; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #434343; 
 
    color: white; 
 
}

<div id="siteHeader"> 
 
    <div class="container-fluid normalize"> 
 
    <div class="nav"> 
 
     <ul class="left"> 
 
     <li><a href="#home">Link</a> 
 
     </li> 
 
     <li><a href="#news">Link</a> 
 
     </li> 
 
     <li><a href="#news">Link</a> 
 
     </li> 
 
     </ul> 
 
     <img src="content/images/logo.png" class="logo"> 
 
     <ul class="right"> 
 
     <li><a href="#home">Link</a> 
 
     </li> 
 
     <li><a href="#news">Link</a> 
 
     </li> 
 
     </ul> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">Dropdown <span>+</span> 
 
     </button> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

フレキシボックスは、合理的な解決策のように見えます。 floatのプロパティをすべて削除し、右側に表示されるアイテムをラップするdivコンテナを追加し、フレックスボックスのプロパティをnavエレメントに追加しました。

#siteHeader { 
 
    max-width: 1600px; 
 
    padding-top: 15px; 
 
    height: 93px; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    background-color: #000; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-top: 1px solid #d7d5d5; 
 
} 
 
#siteHeader a { 
 
    text-decoration: none; 
 
} 
 
.logo { 
 
    display: block; 
 
    height: 55px; 
 
    width: auto; 
 
    float: left; 
 
} 
 

 
.nav { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
.right, .left{ 
 
    display: inline-flex; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: auto; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 6px 16px; 
 
    text-decoration: none; 
 
    float: left; 
 
} 
 
li a:hover { 
 
    background-color: #000; 
 
} 
 
.dropbtn { 
 
    background-color: #000; 
 
    color: white; 
 
    padding-top: 6px; 
 
    padding-bottom: 25px; 
 
    border: none; 
 
    cursor: pointer; 
 
    min-width: 100px; 
 
    text-transform: uppercase; 
 
} 
 
.dropdown { 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #434343; 
 
    min-width: 185px; 
 
    right: 9px; 
 
} 
 
.dropdown-content a { 
 
    color: white; 
 
    padding: 13px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #000000 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    float: left; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #434343; 
 
    color: white; 
 
}

<div id="siteHeader"> 
 
    <div class="container-fluid normalize"> 
 
    <div class="nav"> 
 
     <ul class="left"> 
 
     <li><a href="#home">Link</a> 
 
     </li> 
 
     <li><a href="#news">Link</a> 
 
     </li> 
 
     <li><a href="#news">Link</a> 
 
     </li> 
 
     </ul> 
 
     <img src="content/images/logo.png" class="logo"> 
 
     <div class="right"> 
 
     <ul> 
 
      <li><a href="#home">Link</a> 
 
      </li> 
 
      <li><a href="#news">Link</a> 
 
      </li> 
 
     </ul> 
 
     <div class="dropdown"> 
 
      <button class="dropbtn">Dropdown <span>+</span> 
 
      </button> 
 
      <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
      </div> 
 
     </div>   
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>