CSS -导航

Question

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

​

​

另一部分是，我用填充来做这件事，所以如果我把"test“或者它放在不同的情况下，等等，它会重复这个框。代码预览：

.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

对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

Answer 2

导航系统在列表中工作得很好。您还可以将链接设置为块，将其设置为具有行高的高度/宽度。

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