ATENCIÓN AL CLIENTE: +34 923 199 148

Lista de ítems en una misma línea

Tabla de contenidos

Desde un punto de vista de accesibilidad web, los listados en una página web, deben estar implementarse con listas. Visualmente, el resultado será el mismo, pero al acceder con un lector de pantalla no.

En el siguiente ejemplo, expongo cómo crear una lista de elementos en una misma línea implementados con una lista de tipo <ul> mediante estilos CSS. Para ello vamos a crear las siguientes clases CSS:

.lista ul
{
   padding-right: 0px;
   padding-left: 0px;
   padding-bottom: 0px;
   padding-top: 0px;
   margin: 0px;
}

.lista li
{
   list-style-type: none;
   display: inline;
   padding-right: 5px;
}

El código HTML del ejemplo sería el siguiente:

<div class="lista">
   <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
   </ul>
</div>
Contenido relacionado