menu horizontal 5 itens 20% linha de baixo?

[diasgabrie 0]

olá pessoal,

 

tenho um menu horizontal:

<style>

#menu ul {
	padding:0px;
	margin:0px;
	background-color:#EDEDED;
	list-style:none;
 	height:100px;
 	width:100%;
}

#menu ul li { 
 display: inline;
 }

#menu ul li a {
        width:20%;
        text-align:center;
	display: inline-block;
	background-color:#EDEDED;
	color: #333;
	text-decoration: none;
        height:100px;
}
#menu ul li a:hover {
	background-color:#D6D6D6;
}
</style>

<nav id="menu">
	<ul>
		<li><a href="javascript:;" id="fotos">Fotos</a></li>
		<li><a href="javascript:;" id="musicas">Músicas</a></li>
		<li><a href="javascript:;" id="posts">Posts</a></li>
		<li><a href="javascript:;" id="...">...</a></li>
		<li><a href="javascript:;" id="...">...</a></li>
	</ul>
</nav>

se coloco width 20% ele vai para linha de baixo, se coloco 19.7 ele não preenche todo o espaço. como faço para o menu preencher corretamente todo o espaço sem ir para linha de baixo?

 

obrigada!

[reebr 94]

#menu {

white-space: nowrap;

}

[diasgabrie 0]

muito obrigada!!!

 

e aproveitando, como eu poderia alinhar o texto no centro da li na vertical? vertical-align: middle não funciona

[reebr 94]

Funciona sim, dá uma lida: http://www.maujor.com/blog/2006/07/17/propriedade-vertical-align/

 

Ou então você pode usar "line-height". No seu caso ficaria...

#menu ul li a {
   /* outras regras */
   line-height: 100px;
}

[diasgabrie 0]

muito obrigada!!!