¿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>
3 respuestas
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>
Intente agregar margin: 5px
o line-height: 200%
. Primero lo mueve horizontalmente, luego verticalmente.
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>
Nuevas preguntas
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].