li 和 Chrome 在点击 link 后的元素样式问题

Question

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

您可以在此处查看演示：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

在您的 css 中更改为李{ 显示：内联；列表样式：none； } 一种 { 颜色：#000；填充：0 10% 0 10%；文字装饰：none； }

这仍将内联显示，并且无论浏览器如何，样式都将保持不变

Answer 2

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

li 和 Chrome 在点击 link 后的元素样式问题

li and a element styling issue with Chrome after clicking a link

html

css

google-chrome

html-lists