Principalmente, debemos aplicar la propiedad CSS display:inline a cada elemento de la lista para colocarlos uno junto al otro, y definir márgenes para separar cada opción.
Código HTML:
<html>
<head>
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<ul id="lista1">
<li>
<a href="https://informaticapc.com/">Ir a InformaticaPC</a>
</li>
<li>
<span class="separador">| </span><a href="https://informaticapc.com/blog/">Ir al blog</a>
</li>
<li>
<span class="separador">| </span><a href="http://www.google.es/">Ir a Google</a>
</li>
<li>
<span class="separador">| </span><a href="http://www.yahoo.es/">Ir a Yahoo</a>
</li>
<li>
<span class="separador">| </span><a href="http://www.bing.es/">Ir a Bing</a>
</li>
</ul>
</body>
</html>
Código CSS:
#lista1 {
font-family:Arial;
font-weight:bold;
font-size:13px;
}
.separador {
color:gray;
}
#lista1 li {
display:inline;
padding-left:3px;
padding-right:3px;
background-color:black;
}
a {
color:white;
text-decoration:none;
}
a:hover {
color:black;
background-color:lightgray;
}
El ejemplo anterior quedaría:
