css - 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

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

 <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'); }

Answer 2

对您的 html 进行了一些编辑，使其在语义方面稍好一些。大多数情况下只需要一个对齐中心。

HTML

<nav class="menu">
  <ul>
    <li><a href="">Homepage</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</nav>

CSS

.menu {
  background-image: url('../img/navbar_bg.png');
  background:black;
  display:inline-block;
  height: 65px;
  text-align:center;
  width: 100%;
}
ul {
  display:inline-block;
  list-style:none;
  margin:0 auto;
  padding-top:4px;
  width:auto;
}
li {
  display:inline-block;
  margin-right:10px;
  width:160px;
}
.menu a {
  color: #FFFFFF;
  display:block;
  text-decoration: none;
  font-size: 14px;
  background-image:url('http://i.imgur.com/T07vDRX.png');
  padding-top: 20px;
  padding-bottom: 18px;
  width:160px;
}
.menu a:hover {
  text-decoration: none;
  background-image: url('../img/navhov.png');
}

工作链接在这里...

http://codepen.io/alexbaulch/pen/HrAxl