在標題中集中導航元素時遇到問題

我正在爲某些體驗在網站上工作，並且遇到了此元素的問題。我不確定發生了什麼事。在檢查中，編號爲headerInner和類別navLogo是1200×0像素。我所試圖做的就是把所有這些鏈接，並在一個盒子裏的標誌，標題中居中，但這是結果：在標題中集中導航元素時遇到問題

HTML：

<body> 
<header> 
    <div id="headerInner"> 
     <nav class="navLogo"> 
      <a href="#" id="menuIcon"></a> 
      <ul> 
       <li> 
        <a class="current" href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="studio.html">Studio</a> 
       </li> 
       <li> 
        <a class="navLogo" href="index.html"><img 
        src="img/navBanner.png"></a> 
       </li> 
       <li> 
        <a href="live.html">Live</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </nav> 
    </div> 
</header>

CSS：

header { 
    margin: 0 auto; 
    border-bottom-right-radius: 50px; 
    border-bottom-left-radius: 50px; 
    background-color: #a30101; 
    width: 95%; 
    height: 86px; 
} 

#headerInner { 
    max-width: 1200px; 
    margin: 0 auto; 
} 

#logo { 
    margin: 20px; 
    float: left; 
    width: 200px; 
    height: 60px; 
    background: url(img/logo.png) no-repeat center; 
} 

nav { 
    margin: 0 auto; 
    padding: 0; 
} 

.navLogo { 
    margin: 0 auto; 
} 

#menuIcon { 
    display: hidden; 
    width: 40px; 
    height: 40px; 
    background: url(img/nav.png) center; 
} 

a:hover#menuIcon { 
    border-radius: 4px 4px 0 0; 
} 

ul { 
    list-style-type: none; 
} 

nav ul li { 
    font-family: 'Alegreya', sans-serif; 
    font-size: 150%; 
    display: inline-block; 
    float: left; 
    padding: 10px; 
}

來源

2017-05-28 Carl Sagan

視覺表達中 [鏈接]（http://imgur.com/a/OuTIh） –

將UL內div.menu容器像日是

<div class="menu-container"> 
    <ul> 
    [...] 
</ul> 
</div>

然後設置樣式

.menu-container { 
text-align: center; 
} 

ul { 
display: inline-block; 
margin: 0; 
padding: 0; 
}

來源

2017-05-28 22:00:46 hacklover

非常感謝你。 –

在標題中集中導航元素時遇到問題

回答

相關問題