1 
<!DOCTYPE html>
<html>
<head>
<style>

これは、幅が 50% のナビゲーションのサイズです

#navigation {
    position: fixed;
    top: 110px;
    width: 50%;
    left:50%;
    margin-left:-25%;
    background: #FFF;
    z-index: 10000;
    height: 60px;
    opacity:0.7;
    padding:0;
    border-bottom:1px solid #ccc;
}

#navigation ul {
    list-style: none;
    padding:30px 0 0 0;
    margin:0;
}

#navigation ul li {
    font-weight:bold;
    color:#3d3d3d;
    float:left;
    padding:0 20px 0 0;
    margin:0;
}

これは、幅も 50% のコンテンツのサイズです

#content {
    position: relative;
    width: 50%;
    height: 100%;
    top:180px;
    left:50%;
    height:800px;
    margin-left:-25%;
    background-color: #3d3d3d;
    padding:0;
}
</style>
</head>

<body>
<div id="navigation">
    <ul>
        <li><a href="#">BUtton 1</a></li>
        <li><a href="#">BUtton 2</a></li>
            <li><a href="#">BUtton 3</a></li>
        <li><a href="#">BUtton 4</a></li>
    </ul>
</div>
<div id="content"></div>
</body>
</html>

ナビゲーションとコンテンツを同じ幅の 50% に設定しましたが、ブラウザーで開くと、これら 2 つのボックスの幅が異なります。

4

2 に答える 2

0

あなたの例では、 #contentの css 部分を変更します。

position: relative;

に：

position:absolute;

これは、相対の場合、div がドキュメント内の表示位置に対して相対的に表示されていたためです。つまり、「#navigation」のプロパティに関連するケースを意味します

絶対divの場合、正確に指定した場所に表示されます。前後に配置された他の要素に関係なく。

于 2015-02-02T07:48:40.963 に答える
0

これは、widthその要素に % を設定すると、最も近い親に関連して取得されるためです。

を に設定するposition:fixedと、#navigationこれはhtml彼の親に#contentなり、bodyは彼の親になります。ここでの問題は、デフォルトの dehtmlタグにpadding値があることです。ボディを html に等しくし、50% 幅を css に設定します。

html, body {
  margin:0;
  padding:0;
}

ここでデモを見るhttp://jsfiddle.net/cAtgd/3/

于 2013-10-24T22:10:04.120 に答える