html - li 和单击链接后 Chrome 的元素样式问题

Question

我有一个简单的菜单，在 Firefox 中运行良好，但在使用 Chrome 时，当您单击它们时，链接会四处移动，因此它破坏了样式。我从某个地方读到 display: block; 在 a 元素上可以解决这个问题，但它没有。

您可以在此处查看演示:https://jsfiddle.net/dewg1L8y/1/使用 Chrome 并点击链接以了解我的意思。

还知道如何删除 Chrome 中的文字换行吗？它在 Firefox 中保持在一行。

html:

<ul>
    <li>
        <a href="#">link 1</a>
    </li>
    <li>
        <a href="#">second link</a>
    </li>
    <li>
        <a href="#">3</a>
    </li>
</ul>

CSS:

li {
    display: inline-block;
    list-style: none;
}

a {
    display: block;
    color: #000;
    padding: 0 10% 0 10%;
    text-decoration: none;
}

Answer 1

只需将 a 标签的内边距从 10% 更改为 10px 或更多