排錯內聯菜單的問題

我有點沮喪。我製作了一個內嵌菜單並將其鎖定並居中，但它仍然有點偏右。我可以用保證金來調整它，但我認爲有更好的方法來做到這一點。感謝您的幫助，我真的很感激。這裏的HTML：排錯內聯菜單的問題

<body> 
<div id="home"> 
<div id="header"> 
    <a href="index.html"><h1>Josh Lamstein</h1></a> 
</div> 
<div id="book"> 
<div id="topbar"> 
    <ul id="menu"> 
    <li><a href="bio.html">About</a></li> 
    | 
    <li><a href="stories.html">Stories</a></li> 
    | 
    <li><a href="http://joshlamstein.wordpress.com">Blog</a></li> 
    | 
    <li><a href="Resume.pdf">Resume</a></li> 
    </ul> 
</div>

而這裏的CSS：

#home{ 
width:900px; 
height:480px; 
margin:0 auto; 
} 

#book{ 
width:100%; 
height:50%; 
margin:0 auto; 
background-color:; 
text-align:center; 
} 

#topbar{ 
width:100%; 
height:20%; 
background-color:blue; 
display:inline-block; 
list-style:none; 
list-style-type:none; 
text-align:center; 
margin:auto; 

} 

#menu{ 
list-style-type:none; 
background-color:; 
display:block; 
display:inline; 
font-family:"helvetica neue", helvetica, sans-sarif; 
font-variant:small-caps; 
font-size:1em; 
letter-spacing:.5em; 
margin:auto; 
} 

#menu li { 
display:inline; 
}

來源

2013-08-27 aveevu

這是因爲瀏覽器將默認padding-left屬性HTML列表元素，如<ul>（谷歌瀏覽器設置-webkit-padding-start: 40px;）。

你可以通過padding屬性重置：

#menu { 
    /* other CSS declaration here ... */ 
    padding: 0; /* <-- Reset the default padding of user agent stylesheet */ 
}

這裏是JSBin Demo。

來源

2013-08-27 21:46:13

它工作完美！非常感謝！ – aveevu

排錯內聯菜單的問題

回答

相關問題