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?
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
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>