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

到你的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

Navs在列表中工作良好。您還可以將鏈接設置爲顯示爲塊，並使用線高設置高度/寬度。

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