2

看看我正在开发的这个网站：new.AudioManiacProductions.com

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

请注意导航栏如何不居中，并且“主页”在左侧有一个意图。我希望导航栏拉伸其父容器的整个跨度并垂直和水平居中。

这是我的页面导航部分、导航列表项和链接的 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>

任何帮助是极大的赞赏！

4

1 回答 1

1

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

#nav ul {
    padding-left: 0;
}

或者只是清除所有填充：

#nav ul {
    padding: 0;
}
于 2013-01-09T19:32:28.233 回答