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;
}

なんであんなにぶっ飛んでるのか理解不能。パディング/フロートを削除すると、ほとんどソートされるようですが、3つのセクションすべてに黄色の境界線が残ります。

これまでの私のコーディングに関する一般的なアドバイスもあればお願いします。悪い癖を早く芽生えさせたい。

4

2 に答える 2

6

削除しwidth:100%ます。

幅を指定する場合100%は、ボーダーにも幅があることを考慮する必要があるため、100% width + 1 pixel left border + 1 pixel right border = the right pipping

CSS3 のボックス サイズ

前述のように、div に 100% の幅を設定するということは、この div にボーダーまたはパディングがある可能性を考慮せずに、実際には親の 100% の幅を与えることを意味します。

したがって、親の幅が 200px で、子の幅が 100%、パディングが 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 の幅は正確に 200px になり、これにはパディングと境界線の幅が含まれます。

于 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 に答える