我該如何對齊兩個彼此下面的導航欄？

我試着把兩個導航欄放在一起，但我在第一個導航欄方面遇到困難。我不太明白爲什麼第二個導航欄不會正確地浮動。以下是我的html和css代碼。我該如何對齊兩個彼此下面的導航欄？

.header_nav1 { 
 
    display: block; 
 
    float: right; 
 
    color: #000; 
 
    font-family: verdana; 
 
    text-transform: uppercase; 
 
    max-width: 1024px; 
 
} 
 

 
.header_nav1 ul li { 
 
    padding-top: 10px; 
 
    padding-right: 10px; 
 
    list-style-type: none; 
 
    display: inline; 
 
} 
 

 
.header_nav2 { 
 
    display: block; 
 
    padding: 50px; 
 
} 
 

 
.header_nav2 ul li { 
 
    display: inline; 
 
    list-style-type: none; 
 
    float: right; 
 
    padding-right: 15px; 
 
    max-width: 1024px; 
 
}

<header class="header_navigation"> 
 
    <div class="container"> 
 
    <nav class="header_nav1"> 
 
     <ul> 
 
     <li><a href="/contact/">Contact</a></li> 
 
     <li><a href="/search/">Search</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    <nav class="header_nav2"> 
 
     <ul> 
 
     <li><a href="/investors/">INVESTORS</a></li> 
 
     <li><a href="/career/">CAREER</a></li> 
 
     <li><a href="/our portfolio/">OUR PORTFOLIO</a></li> 
 
     <li><a href="/solutions/">RETAIL SOLUTIONS</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

謝謝。

來源

2017-04-12 Bibek Sharma

我發現它是由容器類引起的。

您可以刪除容器或更改float: right到display: inline-block

來源

2017-04-12 08:18:21 Dani

不要使用float:right改用display:inline

爲什麼inline？ inline - 基本上它與新的生產線開始，並佔據整個父大小

我還對1個CSS，因爲兩者具有相同的佈局結合了header_nav1和header_nav2

這裏，查看下面的代碼段代碼，並嘗試看到它也在整頁。希望能幫助到你。

.header_nav1, .header_nav2 { 
 
    display: inline; 
 
    color: #000; 
 
    font-family: verdana; 
 
    text-transform: uppercase; 
 
    max-width:1024px; 
 

 
} 
 

 
.header_nav1 ul li{ 
 
    padding-top: 10px; 
 
    padding-right:10px; 
 
    list-style-type: none; 
 
    display: inline; 
 
} 
 

 
.header_nav2 ul li{ 
 
    display: inline; 
 
    list-style-type: none; 
 
    padding-right:15px; 
 
    max-width:1024px; 
 
}

<header class="header_navigation"> 
 
    <div class="container"> 
 
     <nav class="header_nav1"> 
 
      <ul> 
 
       <li><a href="/contact/">Contact</a></li> 
 
       <li><a href="/search/">Search</a></li> 
 
      </ul> 
 
     </nav> 
 

 
     <nav class="header_nav2"> 
 
      <ul> 
 
       <li><a href="/investors/">INVESTORS</a></li> 
 
       <li><a href="/career/">CAREER</a></li> 
 
       <li><a href="/our portfolio/">OUR PORTFOLIO</a></li> 
 
       <li><a href="/solutions/">RETAIL SOLUTIONS</a></li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
</header>

來源

2017-04-12 08:14:35 Grinex

非常感謝你的回覆。有用！！但是，如果我希望屏幕右上方的導航欄完全對齊，則需要更改哪些內容？ –

@BibekSharma - 如果你想在1行顯示兩個導航欄，你應該使用'display：inline-block'。檢查這個小提琴鏈接[display：inline-block]（https://jsfiddle.net/grinex/e8uux34e/） – Grinex

我該如何對齊兩個彼此下面的導航欄？

回答

相關問題