Center the list on the side Nav

Asked

Viewed 21 times

0

I started learning layout with CSS recently. I have a certain problem that the list in div(gray) side is not getting in the center. It is easy to see my problem when running the program.

I believe ul shifts li to the right.

Thanks for helping me put the list in the middle with the 2px edge docked.

#geral {width: 100%;background: blue; border:2px solid;height: 5000px}

#teste {width: 100%; background: green;height: 100px; line-height: 100px; text-align: center; font-size: 80px}

#teste2 ul li{display: inline; padding: 10px}

#teste2 {width: 100%;height: 60px; line-height: 60px; text-align: center; font-size: 30%; background: yellow;position: relative;top: -80px}

#NavL {width: 20% ; background: grey; font-size: 20%; position: relative;top: -80px; height: 280px; line-height: 90px; float: left}

#NavL ul li {display: block;border:2px solid; text-align: center}
<!DOCTYPE html>
<html>

	<head>

<meta charset="utf-8">
<meta name='Description' content="Formas">

	<title>Formas</title>
  
</head>

<body>

<div class=container id="geral">


<div id="teste">
	<p>TESTE</p>

<div id="teste2"> 
	<ul>
	<li>Início</li>
	<li>Contato</li>
	<li>Mais informações</li>
	</ul>
</div>

<div id="NavL">
	<nav>
		<ul>
<li>Mais caros</li>
<li>Mais baratos</li>	<li>Infantil</li>
		</ul>
	</nav>
</div>

</div>
</body>
</html>

html css

1 answer

0


You have to take the margins and the padding of ul inside the div #NavL:

#NavL ul{
  padding: 0; margin: 0;
}


#geral {width: 100%;background: blue; border:2px solid;height: 5000px}

#teste {width: 100%; background: green;height: 100px; line-height: 100px; text-align: center; font-size: 80px}

#teste2 ul li{display: inline; padding: 10px}

#teste2 {width: 100%;height: 60px; line-height: 60px; text-align: center; font-size: 30%; background: yellow;position: relative;top: -80px}

#NavL {width: 20% ; background: grey; font-size: 20%; position: relative;top: -80px; height: 280px; line-height: 90px; float: left}

#NavL ul li {display: block;border:2px solid; text-align: center}

#NavL ul{
  padding: 0; margin: 0;
}
<!DOCTYPE html>
<html>

	<head>

<meta charset="utf-8">
<meta name='Description' content="Formas">

	<title>Formas</title>
  
</head>

<body>

<div class=container id="geral">


<div id="teste">
	<p>TESTE</p>

<div id="teste2"> 
	<ul>
	<li>Início</li>
	<li>Contato</li>
	<li>Mais informações</li>
	</ul>
</div>

<div id="NavL">
	<nav>
		<ul>
<li>Mais caros</li>
<li>Mais baratos</li>	<li>Infantil</li>
		</ul>
	</nav>
</div>

</div>
</body>
</html>

  • These margin and padding that took are characteristics of the ul property, they have no relation to the div?

  • UL has default margin and padding. Depending on how you use an unordered list (in this case, UL), you have to reset these properties.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.