Elementos del espacio en la lista en línea

Question

¿Cómo creo suficiente espacio entre los elementos de la siguiente lista para que los usuarios de dispositivos móviles no hagan clic en el enlace incorrecto? Tenga en cuenta que la lista es horizontal. Tenga en cuenta también que la lista puede ajustarse, por lo que el problema está en los planos vertical y horizontal.

ul#menu li {
  display:inline;
}

<ul id="menu">
    <li><a href="/list/A">Ant</a></li>
    <li><a href="/list/B">Bear</a></li>
    <li><a href="/list/C">Cat</a></li>
    <li><a href="/list/D">Dog</a></li>
    <li><a href="/list/E">Elf</a></li>
    <li><a href="/list/F">Fish</a></li>
    <li><a href="/list/G">Gorilla</a></li>
    <li><a href="/list/H">Hourse</a></li>
    <li><a href="/list/I">Indigo</a></li>
    <li><a href="/list/J">Japan</a></li>
    <li><a href="/list/K">Knight</a></li>
    <li><a href="/list/L">Laos</a></li>
    <li><a href="/list/M">Mouse</a></li>
    <li><a href="/list/N">Nigeria</a></li>
    <li><a href="/list/O">Orange</a></li>
    <li><a href="/list/P">Pony</a></li>
    <li><a href="/list/Q">Queen</a></li>
    <li><a href="/list/R">Rat</a></li>
    <li><a href="/list/S">Stoat</a></li>
    <li><a href="/list/T">Tiger</a></li>
    <li><a href="/list/U">Uganda</a></li>
    <li><a href="/list/V">Vermont</a></li>
    <li><a href="/list/W">Wales</a></li>
    <li><a href="/list/X">Xray</a></li>
    <li><a href="/list/Y">York</a></li>
    <li><a href="/list/Z">Zambia</a></li>
</ul>

html css

0

Baz 5 oct. 2019 a las 20:53

Answer 1

Puede usar el modelo de diseño flexbox y luego margin-right, margin-bottom.

ul#menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

ul#menu li {
  margin-right: 15px;
  margin-bottom: 15px;
}

<ul id="menu">
  <li><a href="/list/A">Ant</a></li>
  <li><a href="/list/B">Bear</a></li>
  <li><a href="/list/C">Cat</a></li>
  <li><a href="/list/D">Dog</a></li>
  <li><a href="/list/E">Elf</a></li>
  <li><a href="/list/F">Fish</a></li>
  <li><a href="/list/G">Gorilla</a></li>
  <li><a href="/list/H">Hourse</a></li>
  <li><a href="/list/I">Indigo</a></li>
  <li><a href="/list/J">Japan</a></li>
  <li><a href="/list/K">Knight</a></li>
  <li><a href="/list/L">Laos</a></li>
  <li><a href="/list/M">Mouse</a></li>
  <li><a href="/list/N">Nigeria</a></li>
  <li><a href="/list/O">Orange</a></li>
  <li><a href="/list/P">Pony</a></li>
  <li><a href="/list/Q">Queen</a></li>
  <li><a href="/list/R">Rat</a></li>
  <li><a href="/list/S">Stoat</a></li>
  <li><a href="/list/T">Tiger</a></li>
  <li><a href="/list/U">Uganda</a></li>
  <li><a href="/list/V">Vermont</a></li>
  <li><a href="/list/W">Wales</a></li>
  <li><a href="/list/X">Xray</a></li>
  <li><a href="/list/Y">York</a></li>
  <li><a href="/list/Z">Zambia</a></li>
</ul>

1

user9408899 5 oct. 2019 a las 18:01

Answer 2

Intente agregar margin: 5px o line-height: 200%. Primero lo mueve horizontalmente, luego verticalmente.

1

Javascript Dev 5 oct. 2019 a las 17:57

Answer 3

ul#menu {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid grey;
}

ul#menu li {
  margin: 10px;
  list-style-type: none;
  background: lightgrey;
  padding: 5px 10px;
}

<ul id="menu">
  <li><a href="/list/A">Ant</a></li>
  <li><a href="/list/B">Bear</a></li>
  <li><a href="/list/C">Cat</a></li>
  <li><a href="/list/D">Dog</a></li>
  <li><a href="/list/E">Elf</a></li>
  <li><a href="/list/F">Fish</a></li>
  <li><a href="/list/G">Gorilla</a></li>
  <li><a href="/list/H">Hourse</a></li>
  <li><a href="/list/I">Indigo</a></li>
  <li><a href="/list/J">Japan</a></li>
  <li><a href="/list/K">Knight</a></li>
  <li><a href="/list/L">Laos</a></li>
  <li><a href="/list/M">Mouse</a></li>
  <li><a href="/list/N">Nigeria</a></li>
  <li><a href="/list/O">Orange</a></li>
  <li><a href="/list/P">Pony</a></li>
  <li><a href="/list/Q">Queen</a></li>
  <li><a href="/list/R">Rat</a></li>
  <li><a href="/list/S">Stoat</a></li>
  <li><a href="/list/T">Tiger</a></li>
  <li><a href="/list/U">Uganda</a></li>
  <li><a href="/list/V">Vermont</a></li>
  <li><a href="/list/W">Wales</a></li>
  <li><a href="/list/X">Xray</a></li>
  <li><a href="/list/Y">York</a></li>
  <li><a href="/list/Z">Zambia</a></li>
</ul>

0

Vahid Akhtar 5 oct. 2019 a las 18:49

Elementos del espacio en la lista en línea

3 respuestas

Nuevas preguntas

html