子元素的宽度超过其父 div 的宽度。我认为这一定是因为我将位置设置为固定的，但我不知道用什么替换它。这个 div 是一个导航栏，应该固定在窗口的顶部。当我摆脱位置：固定时，大小非常适合父 div。但是，导航栏不再固定在顶部。我该如何解决这个问题？
参考：page
CSS：
.fixed_pos {
position: fixed;
}
查看：
<div class="container-fluid">
<div class="row-fluid">
<div class="span11 fixed_pos">
<ul class="nav nav-tabs">
</ul>
</div>
</div>
</div>
提前非常感谢！
【问题讨论】：
对于固定导航，您通常需要在最外层或在其自己的绝对 div 中使用它。这是相当直接的。这是一个供您查看和调整的小提琴。仍然不确定你真正想用所有这些 div 做什么，但这是一个可以轻松调整的基本设置。
http://jsfiddle.net/hakarune/FMmEc/
HTML：
<div id="wrap">
<nav>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</nav>
<div id="header">
<h1>CSS Newbie: Super Simple Horizontal Navigation Bar</h1>
</div>
<div id="content">
<p> Basic Fixed Nav at Top</p>
</div>
</div>
CSS
nav {
width: 100%;
float: left;
margin: 0 0 15px 0;
padding: 0px;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position:fixed;
top:0px;
}
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; }
/* End navigation bar styling. */
/* This is just styling for this specific page. */
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif; }
#wrap {
width: 750px;
margin: 0 auto;
background-color: #fff; }
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 30px auto 0;
}
#content {
padding: 0 50px 50px; }
【讨论】：
min-width:300px; 它会阻止它被调整为小于导航栏所需的长度。
right:0, left:0, position:fixed。这有效地减少了所有不必要的边距，并使导航栏很好地适应整个屏幕。
固定位置元素相对于视口定位，而不是它们的包含元素 (details)。以下方法可能有效：
<body>
<!-- the stuff you have up here... -->
<div class="container-fluid"
style="
position: fixed;
left: 0;
right: 0;
padding-right: inherit;
padding-left: inherit;">
<div class="row-fluid" id="menus-desktop"><!-- MENUS DESKTOP -->
<!-- set to span12 and removed fixed_pos class -->
<div class="span12" style="position: relative;">
<!-- ul, etc... -->
</div>
</div>
</div>
<!-- the previous container but without the nav stuff -->
</body>
我将导航元素移动到它们自己的固定容器中，该容器是body 的直接子元素，它填充到inherit，因此它将适应您在主体上设置的任何内容。然后，之前固定的 <span> 元素不应再被固定，而是设置为 span12，因此它的宽度正确。
【讨论】：