0

Tenho a seguinte lista:

<ul>
  <li>Inicio</li>
  <li>Notícias</li>
  <li>Download</li>
  <li>Contatos</li>
</ul>

Gostaria de tornar isso uma lista horizontal separada por um carácter de barra |, como posso fazer isso?

2 Respostas 2

4

Para isso você vai usar css. O código é o seguinte:

 ul li {
    display: inline;
}

li:before {
content: " | ";
}

li:first-child:before {
content: none;
}

O exemplo aqui

1
  • Perfeita resposta, creio nem precisar complementar. Commented 21/06/2016 às 19:16
1

Veja é isso... com barra por horizontal.

ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: 1px solid white;
}

ul li {
  list-style-type: none;
  padding: 10px;
  border-right: 1px solid black;  
}

ul li:last-child {
  border: 0px;
}
<ul>
  <li>Inicio</li>
  <li>Notícias</li>
  <li>Download</li>
  <li>Contatos</li>
</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .