如何使导航宽度自动，同时绝对定位它的包装器

Question

这是我的CSS：

    <style>

ul, ol, dl {    padding: 0;
    margin: 0;
}

         #navWrapper {
            background:#3C6;
            height: 90px;
            float: left;
            position: relative;
            width: 600px;
        }


        #nav {
            margin: 0 0 0 0;
            padding: 0;
            list-style: none;
            background-color: #f2f2f2;
            border-bottom: 1px solid #ccc; 
            border-top: 1px solid #ccc; 
            position: absolute;
            bottom: 0;
            }

        #nav li {
            float: left;
            list-style-type: none;
            }

        #nav li a, #nav a:visited {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            color: #069;
            border-right: 1px solid #ccc; }

        #nav li a:hover, #nav a:active, #nav a:focus {
            color: #c00;
            background-color: #fff; }

    .clearfloat { 
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }

    #wrapper {
        width: 965px;
        background: #FFFFFF;
        margin: 0 auto;
    }

    a img { 
        border: none;
        float: left;
    }



    </style>

这是我的HTML：

<div id="wrapper">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="300px" height="90px" id="Insert_logo"/></a> 
   <div id="navWrapper">
   <div id="nav">
      <ul class="nav">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
  <!-- end #nav --></div>
  <!-- end #navWrapper --></div>
    <!-- end .header --></div>
    <div class="clearfloat"></div>
    </div>

我正在尝试创建一个位于其包装器底部的导航栏。我能想到的唯一方法是使用绝对定位，并将底部设置为0。但问题是我必须在包装器内部设置div的宽度，这就是我的代码现在所反映的。我希望宽度是动态的，并随着导航栏的宽度变化，而导航栏仍然位于包装器的底部，对齐到标题图像的底部。我该怎么做呢？

Answer 1

您可以将#nav设置为100%宽度，并将这四个项目分别设置为25%宽度。

fiddle

如果你指的是其他东西，请留下评论。

以下是我所做的确切更改。

#nav {
   width: 100%; /* Add: */ 
}

#nav li {
   width: 25%; /* Add: */ 
}

根据小提琴you provided，navWrapper上的左侧浮动会导致问题。移除它会隐藏徽标，该徽标漂浮在左侧。要解决此问题，请在navWrapper之前和徽标图像之后放置一个清晰的修复标记。

updated fiddle