¿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>
0
Baz 5 oct. 2019 a las 20:53

3 respuestas

La mejor respuesta

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

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

1
Javascript Dev 5 oct. 2019 a las 17:57
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