Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

3dmaniaco

Espaçamento LI

Por , em Desenvolvimento frontend

Recommended Posts

3dmaniaco    1

3dmaniaco
Postado

Eu criei um menu com UL e LI e queria que os items ficassem espalahados em 100% na horizontal, como posso fazer ?

 

#submenu { // Essa é uma DIV
	position: fixed;
	background-color:#2472ba;
	z-index: 10000;
	display: none;
	left: 0px;
	top:70px;
}
#menu ul {
	width: 100%;
	list-style:none;
}
#submenu ul li {
	display: inline;
	color: #FFFFFF;
	font:10% Tahoma;
	font-size:medium;
}

 

Valew

Compartilhar este post

Link para o post
Compartilhar em outros sites

3dmaniaco    1

3dmaniaco
Postado

Eu inseri o float:left e o width:100% mas não funcionou, meu css ficou assim:

 

#submenu {
	position: fixed;
	background-color:#2472ba;
	z-index: 10000;
	display: none;
	width: 100%;
	left: 0px;
	top:70px;
}
#submenu ul {
	width: 100%;
	list-style:none;
}
#submenu ul li {
	display: inline;
	color: #FFFFFF;
	font:10% Tahoma;
	font-size:medium;
	float:left;
}

Valew

Compartilhar este post

Link para o post
Compartilhar em outros sites

3dmaniaco    1

3dmaniaco
Postado

Segue o Código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site</title>
<style type="text/css">
#submenu {
	position: fixed;
	background-color:#2472ba;
	z-index: 10000;
	width: 100%;
	left: 0px;
	top:70px;
}
#submenu ul {
	width: 100%;
	list-style:none;
}
#submenu ul li {
	display: inline;
	font:10% Tahoma;
	font-size:medium;
	float:left;
}
</style>

<body>
<div id="submenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</body>
</html>

Valew

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

atualmente com css puro, vc não consegue fazer isso muito bem.

 

a única forma é contar a quantidade de items LI, e dar uma largura igual a 100 % numero de LIs

 

no seu caso 100% / 8

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

setando o width de cada li para 12.5%

 

eu disse ali em cima.

#submenu ul li {
   width: 12.5%; /* 100% / 8 */
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito