传送 css 导航栏？

Question

所以我正在使用 css，我很讨厌，我让我的代码按照我想要的方式工作，所以我不是在寻找尖刻的评论说我的编码很烂：P

无论如何，我使用 gif 只是为了展示它在做什么 - 我还将提供下面的代码。

https://gyazo.com/3756eb0c3b6246d8b8f74cad6614839a

当点击 IE 时，链接排序传送，点击一个是最后一个位置，然后 none 移动，点击一个在说第一个全部向左移动一个 'link space' 我真的不知道如何解释一下，所以请原谅我的任何失误哈哈。无论如何，这是代码，我没有使用 styles.css 文件，而是使用 index.html 的样式部分 - 我将 post 我所有的样式区域，以防它可能发生冲突，我将在导航栏结束的地方分开，但只是为了使其更易于查看。

ul {
    list-style-type: none;
    margin: 190px;
    overflow: hidden;
    text-align: center;
    text-decoration: line-through;
}

li {
    list-style-type: none;
    float: left;
    padding-left: 30px;
    display: inline-block;
}

a {
    list-style-type: none;
    display: block;
    width: 0%;
    background-color: #757575;
    font-size: 36px;
}

看来我无法通过这里的其他代码部分，所以我要将其粘贴：

导航栏后的代码粘贴站：pastebin/w1J1Yixu

包含导航栏的完整代码的 Pastebin：pastebin/K4ngr4MN

Answer 1

这是因为您在 "code after navbar"

中的 a:active 声明中有 position:fixed;

它所做的是将 link 的 x 和 y 坐标设置为其精确偏移，当您单击页面上的任何 link 时，相对于文档。因此，其余的 link 认为它们的位置固定兄弟不再在相对流中，向左对齐，占据现在空的 space，其中 link曾经住过。

要解决此问题，请从声明中删除 position:fixed; 样式。

a:active { color: #1DFA3D; text-align: right; z-index: 9999; text-decoration: none; }

这是后面的 fiddle：http://jsfiddle.net/yo3L5qdy/

传送 css 导航栏？

Teleporting css navigation bar?

html

css

navigation

navbar