Question

我有以下页面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="page">
        <div id="header">
            <ul id="menu">
                <li class="products">
                    <a href="products.html">Products</a>
                </li>
                <li class="resume">
                    <a href="resume.html">My resume</a>
                </li>
                <li class="blog">
                    <a href="blog.html">Blog</a>
                </li>
                <li class="about">
                    <a href="about.html">About</a>
                </li>
            </ul>
        </div>
        <div id="main">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

</html>

Index.css：

#page {
    width: 1024px;
    height: 900px;
    margin:0 auto;
}

#header {
    width:870px;
}

#menu {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;
}

#menu li {
    float: left;
}

#main {

}

#footer {
    width:870px:
}

Common.css：

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

a {
    text-decoration:none;
}

使用Firebug进行测试，我看到#header为870px，但#menu大于#header。

我已从菜单样式中禁用了边距和填充，结果相同。

为什么#menu大于870px？

我希望边框线的长度为870像素。

Answer 1

因为其中包含的#menu具有

width 870像素
padding-left的34像素

这增加了870 + 34 = 904像素。

将#menu元素的宽度设置为870 - 34 = 836像素（width:836px;）将使其完全合适..

Answer 2

#menu {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;
}

比870px大36px。在width

中将834px设为#menu

Answer 3

因为它有填充。填充将为您的宽度增加34px。如果您希望菜单为870px，则必须将宽度更改为836px。

如果您将#menu改为这些属性，那么您将拥有所需的内容。

#menu {
  border-bottom: 1px solid #EEEEEE;
  border-top: 1px solid #EEEEEE;
  clear: both;
  list-style-type: none;
  margin: 20px 0;
  overflow: hidden;
  padding: 11px 0 11px 34px;
  width: 836px;

}

Answer 4

您设置的宽度就像一个框中的项目。你有内容的宽度（对应于你设置的宽度），然后是填充，然后是边框（框），然后是边距。在上面的代码中，您设置了填充和边框，两者都将添加到元素的可见大小。

Answer 5

#menu 不大于870px，它与所要求的相等。

ul有一个填充。

将padding-left: 0;添加到您的#menu CSS或缩小#menu宽度。

为什么标题大于870px？

5 个答案: