2

链接在这里。

http://jsfiddle.net/8X4UE/

<html>

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <title>Project One</title>
</head>

<body>
    <div class="header">
        <p>#Project One</p>
    </div>

    <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Forum</a></li>

    </ul>
    <div class="content">
        <p>Content goes here!</p>
    </div>
</body>

</html>

CSS：

/* The CSS */

body {
    margin: 0 20%;
    background-color: #333333;
}

.header{

    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #336699;

}

.header p{
    margin-left: 1em;
    font-family: Verdana;
    font-size: 1.2em;
    color: #e2e2e2;
}

.nav{
    width: 100%;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.nav li{
    float: left;
}

.nav li a{
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}

.nav li a:hover{
    color: #c00;
    background-color: #fff;
}

.content {
    display: block;
    width: 100%;
    background-color: #FFFFCC;
    margin: 0;
    border: 1px solid #ccc;
    clear: both;
}

我不明白为什么它只是像那样冒出来。似乎如果我删除填充/浮动它几乎可以对其进行排序，但随后会在所有三个部分留下黄色边框。

到目前为止，如果您也有任何关于我的编码的一般性建议，我想请教您。我想尽快把坏习惯扼杀在萌芽状态。

4

2 回答 2

6

删除width:100%.

当你给出一个100%宽度时，你必须考虑到边框也有一个宽度，所以100% width + 1 pixel left border + 1 pixel right border = the right pipping

CSS3 的盒子尺寸

就像前面提到的，为 div 设置 100% 的宽度，意味着给它实际上是父级的 100% 宽度，而不考虑这个 div 可能有边框或填充。

因此，如果父级的宽度为 200px，子级的宽度为 100%，padding 为 5px，边框为 1px，则 div 的最终宽度将是：

200px + 1px + 1px + 5px + 5px = 212 px.

为避免这种情况，CSS3 引入了一个名为box-sizing的新属性。

使用 box-sizing，div 将具有 100% 的宽度，同时包含边框的宽度和任何填充。

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

现在 div 的宽度正好是 200 像素，包括内边距和边框宽度。

于 2013-03-05T00:22:11.230 回答
0

内容显示在右侧，因为borders算作“内容”。

你的问题在这里：

.content {
    display: block;
    width: 100%;
    background-color: #FFFFCC;
    margin: 0;
    border: 1px solid #ccc;
    clear: both;
}

如果你把它换成

.content {
    ...
    border: 0px solid #ccc;
    ...
}

然后它不戳。正如另一个答案所提到的，删除宽度也可以解决问题（这正是您想要的）。

于 2013-03-05T00:21:23.860 回答