子元素的宽度超出其父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>
提前多多感谢!
答案 0 :(得分:4)
对于固定导航,您通常需要在最外层或其自己的绝对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; }
答案 1 :(得分:0)
固定位置元素相对于视口定位,而不是其包含元素(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
,因此它的宽度正确。