Question

我的CSS看起来像这样：

body {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}

#page {
width: 96%;
}

#logo {
height: 5%;
}

#logo h1 {
margin: 0;
text-align: center;
}

#logo h2 {
text-align: center;
font-size: 0.9em;
}

#menu ul{
text-align: center;
}

#menu li{
display: inline;
}

#content {
padding-left: 4%;
float: left;
}

然后我的HTML就是：

<body>
<div id="page">
<div id="logo">
    <h1>Sample Text Logo</h1>
    <h2>A Sample Catch Phrase</h2>
</div>
<div id="menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
<div id="content">
    <p>Hello!</p>
</div>
</div>
</body>

但是，当我运行此列表时，与我的H1和H2相比，我的列表与中心相比略微偏右。很抱歉，如果这是一个愚蠢的问题，我是编程网站的新手，我想在3个月内参加比赛。

Answer 1

由于ul应用了默认填充，因此您需要以下内容：

ul {
padding:0;
}

Here's a jsFiddle of it

Answer 2

听起来你需要reset your CSS。

您可以通过在样式表最顶部的上述链接中粘贴CSS来完成此操作。

这将删除浏览器默认设置，例如<ul>和<li>上的填充。

为什么我的列表中心不像我的徽标文字？

2 个答案: