4

子元素的宽度超过其父 div 的宽度。我认为这一定是因为我将位置设置为固定的，但我不知道用什么替换它。这个 div 是一个导航栏，应该固定在窗口的顶部。当我摆脱位置：固定时，大小非常适合父 div。但是，导航栏不再固定在顶部。我该如何解决这个问题？

参考：页面

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>

提前非常感谢！

4

2 回答 2

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; }​
于 2012-12-28T07:33:30.150 回答
0

固定位置元素相对于视口定位，而不是它们的包含元素（细节）。以下可能有效：

<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-28T06:52:33.630 回答