时间戳

首页 > 解决方案 > 内联列表中的空格项

html - 内联列表中的空格项

问题描述

如何在以下列表中的项目之间创建足够的空间，以便移动设备的用户不会点击错误的链接。请注意，列表是水平的。另请注意，列表可以换行，因此问题在垂直和水平平面上都有。

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>

标签： htmlcss

解决方案

尝试添加margin: 5px或line-height: 200%。首先水平移动，然后垂直移动。

推荐阅读