HTML導航欄：元素不對齊

Question

我一直在嘗試為學校項目創建一個網站。 但是，導航欄元素未對齊。 導航欄元素應該在樂隊中，但是它們會彈出樂隊的一半。

 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> <a class="first-a-nav">Home</a> <a class="first-a-nav">All Models</a> <a class="first-a-nav">1 to 7 Series</a> <a class="first-a-nav">X series</a> <a class="first-a-nav">M series</a> <a class="first-a-nav">BMW i</a> </nav> </p> </strong> </div> 

CSS部分不能再短一些，否則overflow: hidden就可以了。

總結一下： 我的Nabar完全被搞砸了 。 請幫助我將其恢復正常。

Answer 1

試試這個，而不是在所有地方都使用inline，而嘗試使用inline-block。

 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> <a class="first-a-nav">Home</a> <a class="first-a-nav">All Models</a> <a class="first-a-nav">1 to 7 Series</a> <a class="first-a-nav">X series</a> <a class="first-a-nav">M series</a> <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> <a class="first-a-nav">Home</a> <a class="first-a-nav">All Models</a> <a class="first-a-nav">1 to 7 Series</a> <a class="first-a-nav">X series</a> <a class="first-a-nav">M series</a> <a class="first-a-nav">BMW i</a> </nav> </p> </strong> </div> 

Answer 3

好的，非常簡單； 去掉; background-color: #666; 從CSS類nav