列表（菜单）位于页面顶部

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我的菜单。我希望此菜单显示在页面顶部，这是如何完成的？

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

Answer 1

您可以将其放在<header></header>中。

Answer 2

看来你的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>