どのように私はお互いの下にある2つのナビゲーションバーを整列できますか？

Question

2つのナビゲーションバーをお互いに配置しようとしましたが、最初のものに対して2番目のナビゲーションバーの位置を合わせるのが難しいです。私は2番目のnav barがなぜ正しく浮かんでいないのか、よく分かりませんでした。 以下は私の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>

ありがとうございます。

Answer 1

私はそれがコンテナクラスによって引き起こされていることが分かりました。

あなたはfloat: right

Answer 2

はdisplay:inline

なぜinlineを使用する代わりにfloat:rightを使用しないでください？ 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>