¿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

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
58250896

Nuevas preguntas

2 ¿Hay alguna forma de llamar a una función presionando una tecla en Javascript?
2 Cambiar el tamaño del botón en html / css
2 Cómo eliminar un elemento <div> donde el único identificador único es texto html sin etiquetas
4 CSS y cambio de tamaño de página
3 Redimensionar automáticamente la div secundaria para llenar el espacio disponible de la div principal
2 Enlace de botón de alternancia en html / css
3 Alineación del botón en html / css
2 Coloque los puntos creados dinámicamente desde la esquina superior izquierda a la esquina inferior derecha
2 ¿Cómo hacer que el texto aparezca al pasar el mouse dentro de un div?
2 Mi Javascript para cada bucle combinado con mi detector de eventos solo funciona una vez
Nuevas preguntas con la etiqueta html >

html

HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].

Más sobre html...