传送css导航栏？答案

【问题标题】：Teleporting css navigation bar?传送css导航栏？
【发布时间】：2015-11-17 01:01:40
【问题描述】：

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

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

https://gyazo.com/3756eb0c3b6246d8b8f74cad6614839a

点击时链接有点传送 IE 点击一个是最后一个位置并且没有移动，点击一个说首先向左移动一个“链接空间”我真的不知道如何解释这个，所以请原谅任何失误ups我有哈哈。无论如何这里是代码，而不是使用styles.css文件，我只使用我的index.html的样式部分-我将发布我所有的样式区域以防万一它可能发生冲突，我将在它结束的地方分开然而，导航栏只是为了使其更易于查看。

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;
}

这里的代码的其他部分我似乎无法通过，所以我打算将其粘贴：

navbar后的代码粘贴：pastebin/w1J1Yixu

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

【问题讨论】：

标签： html css navigation navbar

【解决方案1】：

这是因为您在“导航栏后的代码”中的 a:active 声明中有 position:fixed;

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

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

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

下面是后面的小提琴：http://jsfiddle.net/yo3L5qdy/

【讨论】：