2016-08-11 65 views
0

我的網站標題和導航功能,我想要的。但鏈接和徽標的佈局錯位。菜單對齊居中和浮動問題

它應該看起來如下。

鏈路 - 鏈路 - 鏈路----- -----標誌鏈路 - 鏈路 - 下拉

然而是顯示如下

鏈路 - 鏈接 - 徽標--------------下拉列表 - 鏈接 - 鏈接

徽標將不會居中居中......並在下拉菜單顯示鏈接在右邊。

#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>

回答

1

Flexbox的貌似合理的解決方案。我刪除了所有float屬性,添加了div容器以包裝出現在右側的項目,並將flexbox屬性添加到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>