CSS - 导航

Question

我的导航栏中的导航链接有问题。首先，它没有在导航栏中间对齐，如下所示:

另一部分是，我正在使用填充来执行此操作，因此如果我放置除“测试”以外的任何内容或将其放在不同的情况下，等等。它会重复该框。代码预览:

.menu {
background-image: url('../img/navbar_bg.png');
height: 65px;
width: 100%;
}
.menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url('../img/nav.png');
padding-top: 20px;
padding-bottom: 18px;
padding-right: 68px;
padding-left: 68px;
}
.menu a:hover {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url('../img/navhov.png');
padding-top: 20px;
padding-bottom: 18px;
padding-right: 68px;
padding-left: 68px;
}

<div class="menu">
<a href="">Test</a>
<a href="">Test</a>
<a href="">Test</a>
</div>

Answer 1

导航在列表中运行良好。您还可以将链接设置为显示为 block ，因为给它们设置高度/宽度和行高。

 <nav>
    <ul>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul>
 </nav>

CSS

nav {
    width: 100%;
    text-align: center;
    background-image: url('../img/navbar_bg.png'); }

nav li {
    display: inline-block;
    list-style-type: none; }

.menu a {
        display: block;
        color: #FFF;
        text-decoration: none;
        font-size: 14px;
        width: 130px;
        height: 50px;
        line-height: 50px;
        background-image: url('../img/nav.png'); }