Question

我已经阅读了近50篇关于如何使用html和css获取div或其他任何东西的文章，但我无法找到我所犯的错误。

我的HTML看起来像这样：

    <!-- Navigation -->
    <nav>
        <ul>
            <li>
                <a href="#index">aaaaaa</img></a>
            </li>

            <li>
                <a href="#over">bbbbbb</a>
            </li>

            <li>
                <a href="#muziek">cccccc</a>
            </li>

            <li>
                <a href="#gigs">dddddd</a>
            </li>

            <li>
                <a href="#contact">eeeeee</a>
            </li>
        </ul>
    </nav>

这样的CSS：

nav {
    position:fixed;
    z-index: 100;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 58px;
}

ul {
    list-style-type: none;
    }

li {
    float: left;
    display: inline-block;
}

a {
    position:fixed;
    top: 0;
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 10%;   
    }

请注意，我的导航栏及其中的链接都是顶部的。现在，所有链接都堆叠在我想要第一个链接的地方。接下来，我希望链接彼此相邻，而不是彼此重叠。任何帮助都会很棒：）

亲切的问候

Answer 1

一种解决方案是从position: fixed元素中删除a。同时从float: left元素中删除li（display: inline-block就足够了）：

＆＃13;

nav {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 58px;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
a {
  top: 0;
  color: #FFFFFF;
  text-decoration: none;
  margin-left: 10%;
}

＆＃13;

<!-- Navigation -->
<nav>
  <ul>
    <li> <a href="#index">aaaaaa</a>

    </li>
    <li> <a href="#over">bbbbbb</a>

    </li>
    <li> <a href="#muziek">cccccc</a>

    </li>
    <li> <a href="#gigs">dddddd</a>

    </li>
    <li> <a href="#contact">eeeeee</a>

    </li>
  </ul>
</nav>

＆＃13;

Answer 2

将position:fixed添加到标题本身后，您不再需要将其添加到任何位置。添加position:fixed会使标题子项的所有位置相对于标题。由于标题是固定的，因此您不需要再次修复每个孩子，因为position:fixed相对于正文修复了该元素。这就是为什么你把所有的链接分层堆叠。

无法让我固定到顶部导航彼此相邻

2 个答案: