Publicado em 10 de mar.

menu horizontal 100% com adição de elementos

Galera iMasters,

preciso de um help... como eu faço um menu horizontal em css para assuma 100% de largua conforme a quantidade de ítens e se aumentar os items que estes se auto dimensionem para que continue em linha (inline)

Grato

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Aprendiz CSS· 11 de mar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)

<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

	<title> ..:: Menu Horizontal ::.. </title>

 

	<style type="text/css">

 /**************** navegacao *************************/

 

 * {

 margin: 0;

 padding: 0;

 list-style: none;

 font-family: "Trebuchet Ms", Verdana, Arial;

 text-decoration: none;

 }

 

 #navegacao {

 background-color: #CCC;

 min-height: 30px;

 height: 30px !important;

 height: auto;

 }

 

 #navegacao ul {

 background-color: #CCC;

 float: left;

 padding: 0 10px;

 }

 

 #navegacao ul li {

 float: left;

 background: #CCC;

 height: 25px;

 line-height: 25px;

 margin-top: 5px;

 }

 

 #navegacao ul li a {

 margin: 0 10px;

 background: #1F3161;

 height: 25px;

 line-height: 26px;

 color: #FFF;

 padding:7px 10px 2px 0;

 font-size: 11px;

 }

 

 #navegacao ul li a:hover {

 text-decoration: underline;

 }

	</style>

	<!--[if gte IE 6]>

 <style type="text/css">

 #navegacao {

 height: 1px;

 }

 #navegacao ul {

 width: 1000px;

 }

 #navegacao ul li a {

 padding: 8px 10px 2px 0;

 }

 </style>

	<![endif]-->

</head>

<body id="inicial">

	<div id="navegacao">

 <ul>

 <li id="ini"><a href="#">Página Inicial</a></li>

 <li id="aluno"><a href="#">Teste</a></li>

 <li id="minhaConta"><a href="#">Minha Conta</a></li>

 <li><a href="#">Sair</a></li>

 </ul>

	</div>

</body>

</html>