Ir para conteúdo

POWERED BY:

Arquivado

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

Biel.

manter menu no centro da div

Por , em Desenvolvimento frontend

Recommended Posts

Biel.    9

Biel.
Postado
Boa noite a todos. Direto ao ponto. Pessoal Gostaria de manter o menu no centro da div aprendiz, independentemente se eu aumentar ou diminuir o número de menus usando a regra css já existente <ul id="horizontal"> 
<!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>Untitled Document</title>
<style>
#aprendiz{ width:600px; height:40px; margin:auto; text-align:center; background:#C9F;}

#horizontal {
	color:#F93; width:auto;}

#horizontal  li{ 
	float:left;
	display:block;
	text-align: center;
	height:auto;
	line-height:40px;
	list-style-type:none;
    margin:0px 0px 0px 18px;  
	}

#horizontal  li a {
	color:#000;
	background:#CCC;
	font-weight: normal;
	display:block; 
	text-decoration:none;
	font-size:12px;
	padding:0px 6px 0px 6px; 
	} 

#horizontal  li:hover {
	text-decoration:underline;
	color:#FFF;
	}

</style>
</head>

<body>

dessa forma usando a regra css já existente <ul id="horizontal">
<div id="aprendiz">
  <ul id="horizontal">
    <li> <a href="#">Home01</a></li>
    <li> <a href="#">Home02 </a></li>
    <li> <a href="#">Home03</a></li>
  </ul>
</div>

<br><br>

Dessa forma o link fica no centro da div. Não gostaria que fosse assim
<div id="aprendiz">
<a href="#">Home01</a>
<a href="#">Home02</a>
<a href="#">Home03</a>
</div>

</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

Eletronic. Obrigado por postar. Veja:

 

Eu gostaria que fosse dessa forma

dessa forma usando a regra css já existente <ul id="horizontal">
<div id="aprendiz">
  <ul id="horizontal">
    <li> <a href="#">Home01</a></li>
    <li> <a href="#">Home02 </a></li>
    <li> <a href="#">Home03</a></li>
  </ul>
</div>

E não dessa forma

<div id="aprendiz">
          <a href="#">Home01</a>
          <a href="#">Home02</a>
          <a href="#">Home03</a>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

Eletronic, tentei de todas as formas e não consegui. quero colocar este menu <ul id="horizontal"> no centro da div aprendiz independentemente se eu aumentar ou diminuir o número de menus

<div id="aprendiz">
  <ul id="horizontal">
    <li> <a href="#">Home01</a></li>
    <li> <a href="#">Home02 </a></li>
    <li> <a href="#">Home03</a></li>
  </ul>
</div>

menu css

#aprendiz{ width:600px; height:40px; margin:auto; text-align:center; background:#C9F;}

#horizontal {
	color:#F93; width:auto;}

#horizontal  li{ 
	float:left;
	display:block;
	text-align: center;
	height:auto;
	line-height:40px;
	list-style-type:none;
    margin:0px 0px 0px 18px;  
	}

#horizontal  li a {
	color:#000;
	background:#CCC;
	font-weight: normal;
	display:block; 
	text-decoration:none;
	font-size:12px;
	padding:0px 6px 0px 6px; 
	} 

#horizontal  li:hover {
	text-decoration:underline;
	color:#FFF;
	}

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