导航栏文本（网页开发）

Question

所以我添加了我的导航栏，它是一个.png，并且我想要导航栏上的文本，但我一直遇到问题，我试图平均把它分开但它不会，第六个链接将进入一个新的行。

导航条： -

这是我的HTML和CSS。

#navbar { 

background-image: url("http://zathuria.com/forum-images/navbar.png"); 
width: 1262px; 
height: 99px; 
margin-right: -10px; 
margin-top: 60px; 
position: relative; 

} 

#navbar ul { 
max-width: 1000px; 
position: relative; 
list-style-type: none; 
margin-left: 40px; 
padding: 0px; 
overflow: hidden; 
top: 34px; 
} 

#navbar li { 
float: left; 
margin-left: 45px; 
} 

#navbar a:link, #navbar a:visited { 
text-shadow: 0px 0px 3px #000; 
display: block; 
color: #929292; 
text-align: center; 
font-family: arial; 
line-height: 35px; 
font-size: 22px; 
padding: 0px 20px; 
text-decoration: none; 
text-transform: uppercase; 
} 

HTML代码 -

<div id ="navbar"> 
<ul class="menu"> 
<li><a href="/home">HOME</a></li> 
<li><a href="/forums">FORUMS</a></li> 
<li><a href="/vote">VOTE</a></li> 
<li><a href="/donate">DONATE</a></li> 
<li><a href="/hiscores">HISCORES</a></li> 
<li><a href="/wiki">WIKI</a></li> 
</ul> 
</div><br></br> 

Answer 1

你的新生产线的问题是由max-width: 1000px;为#navbar ul引起的。只需将其取出为默认宽度100％即可。

要均匀分配链接，您需要为您的a标签设置一个宽度。背景图像具有不同尺寸的宽度，所以你需要选择li:nth-child(n) a通过6

例如单独设置每个宽度，每个n 1，它看起来相当不错与此：

#navbar li:nth-child(1) a,#navbar li:nth-child(6) a{ 
    width:143px; 
} 

#navbar a:link, #navbar a:visited { 
    width:184px; 
} 

你可以分别调整每个:nth-child的宽度以使其准确无误。

See this JSFiddle.