如果我将 position:fixed 添加到 nav 的 CSS 代码中，导航栏的宽度与容器的宽度不同，有人可以帮助我吗？
我的 HTML:
<body>
<div id="container">
<nav>
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li><a href="contact.html">Contact</a></li>
<li id="login" ><a href="logn.html">Login</a></li>
</ul>
</nav>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
<p>Example text</p>
</div>
</body>
我的CSS:
body {
background-image: url('img/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
margin-top: 0px;
font-family: Arial;
}
#container {
background-color:#D3D3D3;
width: 70%;
margin: auto;
overflow:hidden;
}
nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: grey;
}
li {
float:left;
}
#login {
float: right;
padding-right: 40px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #A1D490;
}
.active {
background-color: #D3D3D3;
color: grey;
}
如果我将其添加到 CSS 中，导航栏将具有其内容的宽度:
nav {
position: fixed;
}
有人可以帮我吗？ 我在不同的网站上进行了搜索，似乎没有什么对我有用。
最佳答案
这是因为默认值为 width: auto。
对于Block-level, non-replaced elements in normal flow ,
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing blockIf there is exactly one value specified as 'auto', its used value follows from the equality.
If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
但是，当您使用 position:fixed 将其从流程中取出时，则 Absolutely positioned, non-replaced elements applies相反。
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position
'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit .
您可以尝试设置其他宽度，例如宽度:100%。但请注意，百分比将根据 containing block 解析。对于固定元素，通常是视口(viewport)。
考虑将 position:relative 添加到父元素，并在元素中使用 position:absolute 而不是 fixed，以便 width: 100% 使其与父级一样宽。
关于html - 当使用位置 : fixed? 时，为什么我的导航与 CSS 中的容器宽度不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40709518/