子元素的宽度超过了父元素的宽度。我想这一定是因为我将位置设置为固定的,但我不知道用什么来替换它。这个 div 是一个导航栏,应该固定在窗口的顶部。当我摆脱 position:fixed 时,大小非常适合父 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 中。这相当简单。这是一个 fiddle 供您查看和调整。仍然不确定您真正想用所有这些 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; }
关于html - 子 div 宽度超过父 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14065378/