カスタムnavbarスタイルが正しく動作しません

Question

私はカスタムのnavbarを持っていますが、ブートストラップなどはありません。

私は試しましたが、1つのタブは残っていて、ドロップダウンは中と1つのタブは右です。

しかし、右側のタブはナビゲーションバーの内側にありません。

ulタグ内にあれば、なぜnavbarから外れているのかわかりません。たぶん誰かがそれを説明することができます。

HTMLコード：

<div id="nav"> 
<div id="nav_wrapper"> 
    <ul> 
     <div id="left"> 
     <li> 
      <a href="#">item #1</a> 
     </li> 
     </div> 
     <div id="mid"> 
     <li> <a href="#">dropdown #1</a> 

      <ul> 
       <li> 
        <a href="#">dropdown #1 item #1</a> 
       </li> 
       <li> 
        <a href="#">dropdown #1 item #2</a> 
       </li> 
       <li> 
        <a href="#">dropdown #1 item #3</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">dropdown #2</a> 

      <ul> 
       <li> 
        <a href="#">dropdown #2 item #1</a> 
       </li> 
       <li> 
        <a href="#">dropdown #2 item #2</a> 
       </li> 
       <li> 
        <a href="#">dropdown #2 item #3</a> 
       </li> 
      </ul> 
     </li> 
     <li> <a href="#">dropdown #3</a> 

      <ul> 
       <li> 
        <a href="#">dropdown #3 item #1</a> 
       </li> 
       <li> 
        <a href="#">dropdown #3 item #2</a> 
       </li> 
       <li> 
        <a href="#">dropdown #3 item #3</a> 
       </li> 
      </ul> 
     </li> 
     </div> 
     <div id="right"> 
     <li> 
      <a href="#">item #2</a> 
     </li> 
     </div> 
    </ul> 
</div> 
<!-- Nav wrapper end --> 

スタイルコード：

body { 
    padding: 0; 
    margin: 0; 
    font-family: Arial; 
    font-size: 17px; 
} 
#nav { 
background-color: #222; 
} 
#left{ 
float: left; 
} 

#mid{ 
margin-left: auto; 
margin-right: auto; 
text-align: center 
} 

#right{ 
float: right; 
} 
#nav ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    min-width: 200px; 
} 
#nav ul li { 
    display: inline-block; 
} 
#nav ul li:hover { 
    background-color: #333; 
} 
#nav ul li a, visited { 
    color: #CCC; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 
#nav ul li:hover ul { 
    display: block; 
} 
#nav ul ul { 
    display: none; 
    position: absolute; 
    background-color: #333; 
    border: 5px solid #222; 
    border-top: 0; 
    margin-left: -5px; 
    z-index: 1; 
} 
#nav ul ul li { 
    display: block; 
} 
#nav ul ul li a:hover { 
    color: #699; 
} 

ここで追加のHTMLとスタイルのコード。

問題はナビゲーションバーにはありません。

divに問題があると思います。

Answer 1

PLSが

#nav_wrapper ul{ 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display:flex; 
} 

を試してみて、今、あなたは#leftと#rightのdivにfloat:leftとfloat:rightを与えることはありません。右のdivは右端に配置されます。

OR

は右端にあなたの3番目の項目を整列するために、既存のスタイルに以下のコードを追加します。

#nav{ 
background-color: #222; 
overflow:hidden; 
} 

#mid{ 
    float:left; 
}