html - 页面顶部的列表(菜单)

Question

nav[role="sub"] ul li {
  position: absolute;
  top: 10%;
  left: 5%;
  bottom: 5%;
  right: 5%;
}

<nav role="sub">
  <ul>
    <li>
      <a href="#test1">test1</a>
    </li>
    <li>
      <a href="#test2">test2</a>
    </li>
    <li>
      <a href="#test3">test3</a>
    </li>
    <li>
      <a href="#test4">test4</a>
    </li>
    <li style="float:right">
      <a href="#test5">test5</a>
    </li>
  </ul>
</nav>

这是我的菜单。我想让这个菜单显示在页面顶部，这是怎么做到的？

我曾尝试在 CSS 中使用它来将列表移动到页面顶部，但它一直停留在页面底部。

Answer 1

看起来你的 css 没问题，只删除第一个 li :

nav[role="sub"] ul li

它使每个 li 元素都定位为绝对位置，这就是它看起来凌乱的原因。

我为 li 添加了一个样式，以防您想在一行中显示它。

nav[role="sub"] ul {
position: absolute;
top: 10%;
left: 5%;
bottom: 5%;
right: 5%; 
}

nav[role="sub"] ul li {
  display: inline-block;
}

<nav role="sub">
    <ul>
        <li>
            <a href="#test1">test1</a>
        </li>
        <li>
            <a href="#test2">test2</a>
        </li>
        <li>
            <a href="#test3">test3</a>
        </li>
        <li>
            <a href="#test4">test4</a>
        </li>
        <li style="float:right">
            <a href="#test5">test5</a>
        </li>
    </ul>
</nav>