He copiado el estilo de un par de tutoriales de css para hacer que una lista aparesca en forma horizontal y nada.
Supongamos que mi lista es la siguiente:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Y deseo que aparesca de forma horizontal, como lo hago con CSS?
El estilo necesario es el siguiente:
<style>
ul li{
display:inline;
}
</style>
Si deseas agregarle un icono a los elementos li puedes hacer lo siguiente:
Agrego padding-left para establecer la zona de relleno izquierdo al texto, y la imagen que quiero mostrar en ese link.
.icono1{
padding-left: 20px;
background:url(../templates/maps/maps/mapa_r1_c2_r2_c2.jpg) no-repeat;
}
por lo que la lista quedaría como sigue:
<ul>
<li class="icono1" >Elemento 1</li>
<li>Elemento 2</li>
</ul>
Encontre este codigo css que asocia la extension a la que apunta el link con una imagen, no lo he probado.
a[href $='.pdf'] {
padding-left: 20px;
background: transparent url(icon_pdf.gif) no-repeat center left;
}
No hay comentarios:
Publicar un comentario