子div的宽度超出父div的宽度

子元素的宽度超过了其父div的宽度。我认为这一定是因为我设定了固定的位置而引起的，但我不知道要用什么来替代它。这个div是一个应该固定在窗口顶部的导航栏。当我摆脱位置：固定，大小适合父母的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>

非常感谢提前！

来源

2012-12-28 Maximus S

就必须加入所有的CSS属性为这些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; }

来源

2012-12-28 07:33:30 hakarune

这是最接近正确的答案。请参阅http://stackoverflow.com/questions/9350818/fixed-sidebar-navigation-in-fluid-twitter-bootstrap-2-0 –

我检查了您的参考页面，它看起来像是在完美工作，至少在我的结尾。除非您将浏览器的大小调整到800以下......这是您想要的吗？您的导航栏不会在较小的窗口大小中消失？（此按钮也消失了......） – hakarune

我编辑了小提琴以反映动态的流体风格。添加'min-width：300px;'它阻止它的大小小于导航栏所需的长度。 – hakarune

固定位置元素相对于视口而不是它们的包含元素（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，因此它具有正确的宽度。

来源

2012-12-28 06:52:33 tiffon

我正在尝试使我的导航宽度完美适合行流体宽度。我认为设置位置：固定到任何流体元素缩小其宽度，以适应里面的内容... –

子div的宽度超出父div的宽度

回答

相关问题