1

我有点沮丧。我做了一个内联菜单并将其挡住并居中，但它仍然有点偏右。我可以用边距调整它，但我认为有更好的方法。谢谢你的帮助，我真的很感激。这是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;
}
4

1 回答 1

0

这是因为浏览器将默认padding-left属性应用于 HTML 列表元素，例如<ul>(Google Chrome set -webkit-padding-start: 40px;)。

您可以通过以下方式重置padding属性：

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

这是JSBin 演示。

于 2013-08-27T21:46:13.023 回答