HTML Navbar：整列していない要素

Question

私は学校プロジェクト用のウェブサイトを作成しようとしています。ただし、navbar要素の位置がずれています。 navbar要素はバンド内にあるはずですが、バンドの半分をポップします。

a { 
 
    background-color: #666; 
 
    float: center; 
 
    display: inline; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    font-family: Arial; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    background-color: #666; 
 
    color: white; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    height: 40px; 
 
    margin-right: 40px; 
 
    margin-top: 0px; 
 
} 
 

 
a:hover { 
 
    color: #22A; 
 
} 
 

 
p { 
 
    text-align: center; 
 
}

<div class="navbar"> 
 
    <strong> 
 
    <p class="nav"> 
 
    <nav> 
 
    \t <a class="first-a-nav">Home</a> 
 
    \t <a class="first-a-nav">All Models</a> 
 
    \t <a class="first-a-nav">1 to 7 Series</a> 
 
    \t <a class="first-a-nav">X series</a> 
 
    \t <a class="first-a-nav">M series</a> 
 
    \t <a class="first-a-nav">BMW i</a> 
 
    </nav> 
 
    </p> 
 
    </strong> 
 
</div>

CSS部分がうまくoverflow: hidden作品他に、任意の短縮を図ることができませんでした。

要約すると：私のNabarは完全にを台無しにしました。それを元に戻すのを助けてください。

Answer 1

インラインを使用する代わりに、インラインブロックを使用してみてください。

a { 
 
    background-color: #666; 
 
    float: center; 
 
    display: inline-block; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
    font-family: Arial; 
 
    text-align: center; 
 
} 
 

 
nav { 
 
    background-color: #666; 
 
    color: white; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    height: 40px; 
 
    margin-right: 40px; 
 
    margin-top: 0px; 
 
} 
 

 
a:hover { 
 
    color: #22A; 
 
} 
 

 
p { 
 
    text-align: center; 
 
}

<div class="navbar"> 
 
    <strong> 
 
    <p class="nav"> 
 
    <nav> 
 
    \t <a class="first-a-nav">Home</a> 
 
    \t <a class="first-a-nav">All Models</a> 
 
    \t <a class="first-a-nav">1 to 7 Series</a> 
 
    \t <a class="first-a-nav">X series</a> 
 
    \t <a class="first-a-nav">M series</a> 
 
    \t <a class="first-a-nav">BMW i</a> 
 
    </nav> 
 
    </p> 
 
    </strong> 
 
</div>

Answer 2

あなたはこれを好きにしたいです。

a { 
 
    background-color: #666; 
 
    display: inline; 
 
    padding: 11px 77px; 
 
    font-family: Arial; 
 
} 
 

 
nav { 
 
    display: inline; 
 
    background-color: #666; 
 
    color: white; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    height: 40px; 
 
    margin-right: 40px; 
 
    margin-top: 0px; 
 
} 
 

 
a:hover { 
 
    color: #22A; 
 
} 
 

 
p { 
 
    text-align: center; 
 
}

<div class="navbar"> 
 
    <strong> 
 
    <p class="nav"> 
 
    <nav> 
 
    \t <a class="first-a-nav">Home</a> 
 
    \t <a class="first-a-nav">All Models</a> 
 
    \t <a class="first-a-nav">1 to 7 Series</a> 
 
    \t <a class="first-a-nav">X series</a> 
 
    \t <a class="first-a-nav">M series</a> 
 
    \t <a class="first-a-nav">BMW i</a> 
 
    </nav> 
 
    </p> 
 
    </strong> 
 
</div>

Answer 3

さて、その非常にシンプル。 を削除します。 background-color: #666;をcssクラスからnav