Question

<!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％，但是当我在浏览器中打开它时，这两个框的宽度不同，有谁可以帮助我？

Answer 1

那是因为当您在width中设置该元素时，该元素将其与其最接近的父元素相关联。

当您为position:fixed设置#navigation时，这会使html为其父级，而#content则将body作为其父级。这里的问题是，默认de html标签的值为padding，现在要使主体为html等于50％宽度等于在css中设置此值：

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

在此处观看演示 http://jsfiddle.net/cAtgd/3/

Answer 2

在您的示例中，更改 #content 的css部分：

position: relative;

为：

position:absolute;

这是因为在 relative 的情况下，div相对于它应该出现在文档中的位置出现。这意味着在您的情况下相对于＆＃39;＃navigation＆＃39;

中的属性

如果绝对 div出现在您确切告诉它的地方。与之前或之后定位的其他元素无关。

为什么css为两个div设置相同的宽度但显示不同的宽度

2 个答案: