Question

看看我正在处理的这个网站：new.AudioManiacProductions.com

可以在此处找到Dreamweaver显示div的屏幕截图：new.AudioManiacProductions.com/images/stack.png

注意导航栏不在中心，“home”在左侧有意图。我希望导航栏可以拉伸它的父容器的整个范围，并且可以垂直和水平居中。

这是我的页面导航部分的CSS，导航列表项和链接。

#nav {
    width: 100%;
    height: 40px;
    margin:  0 auto;
    padding: 0px;
    text-align: center;
    color: #FFF;
    list-style: none;
    line-height: auto;
    verticle-align: middle;
}
#nav li {
    padding: 0px;
    display: block;
    width: 20%;
    list-style-type: none;
    float: left;
    text-align: center;
    overflow: hidden;
    line-height: auto;
    verticle-align: middle;
}
#nav li a {
    font-size: 18px;
    font-weight: 600px;
    text-decoration: none;
    font-weight:800;
    color:#FFF;
}
#nav li a:hover, a:visited {
    color: #00F;
}

这是我的HTML：

<div id="nav">
  <ul>
<li><a href="index.php?home">Home</a></li>
    <li><a href="index.php?about">About Us</a></li>
    <li><a href="index.php?packages">Packages</a></li>
    <li><a href="index.php?quote">Quote</a></li>
    <li><a href="index.php?contact">Contact Us</a></li>
  </ul>
  </div>

非常感谢任何帮助！

Answer 1

浏览器默认在UL标记上设置padding-left。删除填充，这应该有帮助。

#nav ul {
    padding-left: 0;
}

或者只清除所有填充：

#nav ul {
    padding: 0;
}

CSS <ul>导航栏居中问题</ul>

1 个答案: