Publicado em 7 de nov.

Formatar item de lista separadamente

#desenvolvimento-frontend #formatar lista #item de lista #li

Olá, boa noite. Eu provavelmente estou fazendo uma besteira risível, mas...

Meu objetivo é colocar cada item de menu em uma posição diferente, mais ou menos assim:

ITEM 1 ITEM3

ITEM 2 ITEM 4

Já tentei como no código abaixo e com "id".

Também pensei em criar 2 menus, cada um em uma posição... Enfim.

Não sei nada, só fiz um cursinho no youtube e se alguém puder me ajudar, obrigada.

 <nav id="menu">
 <ul>
 <li class="home">Home</li>
 <li class="item2">Item2</li>
 <li class="item3">Item3</li>
 <li class="contato">Contato</li>
 <li class="sobre">Sobre</li>
 </ul>
 </nav>

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

leonardo de andrade baessa· 7 de nov.

<!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>Menu</title>

<style type="text/css">

#menu { margin: 0 auto;}

#menu ul li { text-decoration: none; list-style-type: none;}

.home { margin: 0 auto; }

.item2 { padding: 20px 40px;}

.item3 {

	margin-left: 20px;

	position: absolute;

	left: 134px;

	top: 29px;

}

.contato {

	position: absolute;

	left: 199px;

	top: 65px;

}

.sobre {

	margin-left: 20px;

	position: absolute;

	left: 242px;

	top: 30px;

}

 

</style>

 

</head>

 

<body>

 

 <nav id="menu">

 <ul>

 <li class="home">Home</li>

 <li class="item2">Item2</li>

 <li class="item3">Item3</li>

 <li class="contato">Contato</li>

 <li class="sobre">Sobre</li>

 </ul>

</nav>

 

</body>

</html>

am designer· 9 de nov.

Ola !

Você pode usar o seletor de filhos :nth-child(). Da uma pesquisada, com ele você consegue manipular os filhos da tag ul. Exemplo:

#menu ul li:nth-child(1){ ... }

#menu ul li:nth-child(2){ ... }

#menu ul li:nth-child(3){ ... }

#menu ul li:nth-child(4){ ... }

Sacou ? Dessa forma você consegue manipular um por um do jeito que quiser.