Duda sobre etiqueta display en lista no ordenada

[alvaaz]

Saludos comunidad,

Tengo una duda al respecto de el siguiente código, estoy creando una página y me topo con un problema, he buscado pero no he podido aclararlo, espero que alguno de ustedes pueda ayudarme.

El siguiente código hace de barra de navegación:

Código HTML:

<ul>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Tienda</a></li>
</ul>
 

Ahora esta lista no ordenada quiero que aparezca en horizontal, por lo que encontré se puede utilizar la etiqueta display con su valor inline, pero mi duda es:

¿A que etiqueta le añado tal propiedad? ¿a "<ul>" o "<li>"? he visto algunas páginas que se la agregan a las dos, yo probando y borrando se la agregue sólo a "<li>", de esta forma:

HTML

Código HTML:

<ul>
<li class="inline"><a href="#">Acerca de</a></li>
<li class="inline"><a href="#">Historia</a></li>
<li class="inline"><a href="#">Contacto</a></li>
<li class="inline"><a href="#">Tienda</a></li>
</ul>
 

CSS

Código CSS:

li.inline{
    display: inline;
}
 

y funcionaba, no entiendo porque algunos le ponen el atributo a "<ul>" y a "<li>", esa es mi duda, ¿cómo estaría correcto? y ¿porque?

[comablck]

el "inline" poneselo solo al "li" sin usar clase, asi..

<ul>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Tienda</a></li>
</ul>

ul li {
display:inline-block;
float:left;
}

si te fijas, tambien le puse un float, pero es para corregirlo en el querido internet explorer q tanto adoramos jaja.. espero te sirva

[alvaaz]

pero pusiste "ul li" ¿porque si sólo es necesario según tu en "li"?, ahora ¿porque es necesario un salto después de cada "li"? entiendo eso porque cambiaste inline por inline-block, saludos y gracias.

[alberto510a]

Hola, poner ul li no significa que ul también lo tenga aplicado es una forma de acceder a los elementos en css mediante padres, es decir, tu dices que todas los li dentro de ul tengan ese estilo.

[comablck]

pues el ul es el contenedor de los li, y lo q necesitas poner en linea son los li no el ul en si.. espero me captes lo q quiero dar a entender..

[alvaaz]

Comprendo, ahora recién probe y le quite el "ul" dejando sólo el "li", de esta forma:

Código CSS:

li {
display:inline-block;
float:left;
}
 

y me funcionó dejando la lista no ordenada de la forma deseada es decir sólo en una línea, no entiendo porque ponerle "ul" ¿cual es la diferencia?

[pzin]

¿Cómo aconsejáis poner selectores de ese modo? Si se quiere estilizar un menú y no todos los elementos LI, no lo veo lógico. Tampoco veo lógico recomendar inline-block si se está preguntar por poner los elementos en línea. Y ya para rematar flotar elementos y ponerles un inline-block carece de sentido alguno.

alvaaz échale un ojo a selectores de CSS. Esto es lo primero.

Como seguramente vayas a tener más listas en tu web, lo más lógico es construir tu selector de esta forma:

Código HTML:

<ul id="menu">
 

Código CSS:

ul#menu li {
  display: inline;
}
 

Si necesitas por lo que sea usar inline-block, seguramente puedes usar antes la opción de mostrar los enlaces como elementos de bloque, que a mi parece más limpio y útil.

Código CSS:

ul#menu a {
  display: block;
}
 

Iniciado por alvaaz

y me funcionó dejando la lista no ordenada de la forma deseada es decir sólo en una línea, no entiendo porque ponerle "ul" ¿cual es la diferencia?

Para volver tu selector más específico. En el caso de usar "ul li", es una idiotez, porque li siempre va a ser hijo de ul. No tiene mucho sentido. Si usas "ul li" o simplemente "li" se verán afectados todos los "li" de la página. Si usas "ul#menu li" sólo afectará a los li contenidos dentro de un elemento ul con el id "menu".

[alvaaz]

Por lo que tengo entendido utilizar id o class para estilizar una etiqueta no cambia, pero por lo que he leído en páginas recomiendan utilizar class para estilizar, ¿habrá alguna otra diferencia ya que tu lo ocupaste para la etiqueta ul id="menu".

Desde ya muchas gracias por tu ayuda.

[pzin]

Si bueno, hay un debate sobre si es mejor usar solo clases, o mejor identificadores, y algún loco dice de sólo usar selectores CSS sin tener que usar clases ni identificadores, que poder, se puede.

El debate es más bien relativo a la velocidad de carga, y aún haciendo pruebas con dos mil selectores, la diferencia no se aprecia.

Yo opto por usar las cosas para lo que son; clases para estilos que se repiten e identificadores para elementos únicos. Lo único que intento es, dentro de lo lógico, usar pocas clases e identificadores.

Por ejemplo:

Código HTML:

<ul id="menu_principal">
  <li class="contenedor">
    <a class="enlace"></a>
  </li>
</ul>
 

No tiene mucho sentido, porque podemos perfectamente seleccionar los elementos de la lista con ul#menu_principal li, y los enlaces con ul#menu_principal a.