列表項顯示不正確

Question

我有一個導航我做了，就像我想要的那樣工作..我唯一的問題是按鈕下拉是顯示在第一個2個鏈接的權利，它首先顯示，並強制鏈接最後顯示。

它顯示的下降後的鏈接下來，而不是

標誌---------------------首頁 - 新聞中心 - 下拉

它顯示

標誌--------------------- Dropdown-首頁 - 新聞

下拉應在年底

CODE

#siteHeader { 
 
    padding-top: 22px; 
 
    height: 90px; 
 
    background-color: black; 
 
} 
 
.logo { 
 
    display: block; 
 
    height: 45px; 
 
    width: auto; 
 
    float: left; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: auto; 
 
    display: block; 
 
    float: right; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    float: left; 
 
} 
 
li a:hover { 
 
    background-color: #000; 
 
} 
 
.dropbtn { 
 
    background-color: #000; 
 
    color: white; 
 
    padding-top: 16px; 
 
    padding-bottom: 33px; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    border: none; 
 
    cursor: pointer; 
 
    min-width: 100px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #434343; 
 
    min-width: 185px; 
 
    right: 0; 
 
    text-transform: uppercase; 
 
} 
 
.dropdown-content a { 
 
    color: white; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 12px; 
 
} 
 
.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"> 
 
    <img src="../content/images/official_logo_white.png" class="logo"> 
 

 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#news">News</a> 
 
     </li> 
 
    </ul> 
 

 
    <div class="dropdown"> 
 
     <button class="dropbtn">Dropdown</button> 
 
     <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

在<ul>我已經改變了它的CSS屬性display: block到display: inline-block和<div class="dropdown">我也使它display: inline-block一個S按默認的div元素是塊級這樣既可以適合在同一行，我有兩個包和<div>向<ul>一個<div>，將它們放在右側用float: right

看回答下片段。

#siteHeader { 
 
    padding-top: 22px; 
 
    height: 90px; 
 
    background-color: black; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    height: 45px; 
 
    width: auto; 
 
    float: left; 
 
} 
 
.nav { 
 
    float: right; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: auto; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    float: left; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
    float: left; 
 
}

<div id="siteHeader"> 
 
    <div class="container-fluid"> 
 
    <img src="../content/images/official_logo_white.png" class="logo"> 
 
    <div class="nav"> 
 

 
     <ul> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     </ul> 
 

 
     <div class="dropdown"> 
 
     <button class="dropbtn">Dropdown</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 2

只需切換他們

#siteHeader { 
 
    padding-top: 22px; 
 
    height: 90px; 
 
    background-color: black; 
 
} 
 

 
.logo { 
 
    display: block; 
 
    height: 45px; 
 
    width: auto; 
 
    float: left; 
 
} 
 

 

 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: auto; 
 
    display: block; 
 
    float: right; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    float: left; 
 
} 
 

 
li a:hover { 
 
    background-color: #000; 
 
} 
 

 

 

 
.dropbtn { 
 
    background-color: #000; 
 
    color: white; 
 
    padding-top: 16px; 
 
    padding-bottom: 33px; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    border: none; 
 
    cursor: pointer; 
 
    min-width: 100px; 
 

 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #434343; 
 
    min-width: 185px;  
 
    right: 0; 
 
    text-transform: uppercase; 
 
} 
 

 
.dropdown-content a { 
 
    color: white; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 12px; 
 
} 
 

 
.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"> 
 
    <img src="../content/images/official_logo_white.png" class="logo"> 
 

 
    <div class="dropdown"> 
 
    <button class="dropbtn">Dropdown</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 

 
    <ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    </ul> 
 

 
     </div> 
 
     </div>

Answer 3

如果我是你，我會刪除那些float s，不使用flexbox

#siteHeader { 
 
    padding-top: 22px; 
 
    height: 90px; 
 
    background-color: black; 
 
} 
 
.container-fluid { 
 
    display: flex 
 
} 
 
.nav { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: flex-end 
 
} 
 
.logo { 
 
    flex: 0 50px 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    width: auto; 
 
    display: block; 
 
} 
 
li { 
 
    display: inline-block 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: #000; 
 
} 
 
.dropbtn { 
 
    background-color: #000; 
 
    color: white; 
 
    padding-top: 16px; 
 
    padding-bottom: 33px; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    border: none; 
 
    cursor: pointer; 
 
    min-width: 100px; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #434343; 
 
    right: 0; 
 
    text-transform: uppercase; 
 
} 
 
.dropdown-content a { 
 
    color: white; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    font-size: 12px; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #000 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    background-color: #434343; 
 
    color: white; 
 
}

<div id="siteHeader"> 
 
    <div class="container-fluid"> 
 
    <img src="../content/images/official_logo_white.png" class="logo"> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#news">News</a> 
 
     </li> 
 
     </ul> 
 
     <div class="dropdown"> 
 
     <button class="dropbtn">Dropdown</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>