CSS: Mostrar elementos "li" uno al lado del otro

Los elementos li son, por defecto, elementos de bloque (block) y, por tanto, se muestran uno debajo de otro.

Mediante "display:inline" o "display:inline-block", es posible modificar esta propiedad y hacer que los elementos se muestren en línea (inline), uno al lado del otro:

li {
  display: inline-block;
}

En este punto, tiene sentido modificar también otros aspectos del formato:

li {
  display: inline-block;
  list-style-type: none;
  padding-right: 10px;
}

Con esto, nos aseguramos de que, además de la visualización una al lado de la otra, desaparezcan los marcadores que preceden a los elementos de la lista y de que exista una pequeña separación entre dichos elementos.

@media (max-width: 600px) {
  li {
    display: inline-block;
    list-style-type: none;
    padding-right: 10px;
  }
}

Mencionasle que solo quiere aplicar el cambio en los elementos li cuando el ancho de la página en el navegador disminuye. Puede lograrlo tal como se muestra en el último ejemplo. Con ese CSS, el formato de la lista solo se activa cuando el ancho de la ventana es inferior a 600px.
02/11/2026 a las 23:57