Question

我已从导航栏中删除了一个菜单项，但现在该栏未展开以填充屏幕宽度，因此它现在比实际页面内容短。我怎么做到这一点？我尝试放入宽度：100％，但没有任何区别。

这是我的代码：

   <ul id="PrimaryNav" class="clearfix">
        <li><a href="index.php" title="Home Page">Home</a></li>
        <li><a href="about.php" title="About">About&#47;FAQ</a></li>
        <li><a href="priceguide.php" title="Prices Guide">Price Guide</a></li>
        <li><a href="packages.php" title="Packages">Packages</a></li>
    <!--    <li><a href="laser-lipo.php" title="Laser Lipo">Laser Lipo</a></li> -->
        <li><a href="acne.php" title="Skincare">Skincare</a></li>
        <li><a href="pcos.php" title="PCOS">PCOS</a></li>
        <li><a href="testimonials.php" title="Testimonials" class="last">Testimonials</a></li>
    </ul>

    ul#PrimaryNav {
    margin: 0 auto;
    padding: 0;
    clear: left;
    display: block;
}    
        ul#PrimaryNav li {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 12.5%;
    float: left;
    background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
    ul#PrimaryNav li a {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    border-right: solid 1px #f1f1f1;
    border-bottom: solid 1px #dcdcdc;
}

Answer 1

我没有使用display: block到ul元素，而是使用了display: table; width: 100%;和li元素，而是使用了display: table-cell而不是display: inline-block;。

<强> CSS

ul#PrimaryNav {
    margin: 0 auto;
    padding: 0;
    clear: left;
    display: table;
    width: 100%;
}
ul#PrimaryNav li {
    display: table-cell;
    margin: 0;
    padding: 0;
    background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
ul#PrimaryNav li a {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    border-right: solid 1px #f1f1f1;
    border-bottom: solid 1px #dcdcdc;
}

<强> Working Fiddle

Answer 2

您只需使用display：table-cell：

http://jsfiddle.net/6fjr8uc6/

ul#PrimaryNav {
    margin: 0 auto;
    padding: 0;
    clear: left;
    width:100%;
    display: table;
}    
ul#PrimaryNav li {
    display: table-cell;
    margin: 0;
    padding: 0;
    background: transparent url('../img/primarynavbg.jpg') bottom left repeat-x;
}
    ul#PrimaryNav li a {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    border-right: solid 1px #f1f1f1;
    border-bottom: solid 1px #dcdcdc;
}

删除菜单项，如何使菜单栏扩展填充空间？

2 个答案: