無法在導航欄中將徽標與按鈕對齊

我目前正在爲我的大學項目創建小型網站。我目前遇到了一個我似乎無法修復的小問題。無法在導航欄中將徽標與按鈕對齊

問題在於我爲我的網站創建了一個導航欄，而且標誌位於中心，按鈕的兩邊平均分佈着按鈕，我面對的問題是按鈕沒有與標誌對齊導致導航欄高度增加。我提供了該問題的圖片以及該部分的HTML和CSS代碼。

這是導航欄部分的HTML。

<nav id="navbar"> 
    <ul> 
     <li><a href="index.html">HOME</a></li> 
     <li><a href="shop.html">SHOP</a></li> 
     <li><a href="forum.html">FORUM</a></li> 
     <li><a class="logo" href="index.html"></a></li> 
     <li><a href="aboutus.html">ABOUT</a></li> 
     <li><a href="contactus.html">CONTACT US</a></li> 
     <li><a href="#">BASKET</a></li> 
    </ul> 
    </nav>

這是CSS

#navbar { 
display: block; 
text-align: center; 
height: 90px; 
margin-bottom: 3%; 
background-color: #F1F1F1; 
} 

#navbar ul { 
list-style-type: none; 
padding: 0px 0px; 
margin: 0px 0px; 
overflow: hidden; 
} 

#navbar ul li { 
display: inline-block; 
} 

#navbar ul li a { 
display: inline-block; 
padding: 10px 15px; 
width: 95px; 
color: #000000; 
text-decoration: none; 
line-height: 60px; 
font-weight: bold; 
margin-left: 10px; 
margin-right: 10px; 
text-shadow: 0px 0px 0px #000; 
} 

#navbar .logo { 
background: url("../images/logo1.png") 50% 0 no-repeat; 
height: 80px; 
width: 80px; 
padding: 0 0; 
margin: 0 0; 
}

問題的

圖片：（http://imgur.com/a/Bv4hK）

來源

2016-03-06 Conspiracy

使用display:flex你的資產淨值來解決這個

#navbar ul { 
    list-style-type: none; 
    padding: 0px 0px; 
    margin: 0px 0px; 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

來源

2016-03-06 17:10:57

無法在導航欄中將徽標與按鈕對齊

回答

相關問題