垂直堆叠菜单项不起作用答案

【问题标题】：Stacking menu items vertically not working垂直堆叠菜单项不起作用
【发布时间】：2021-05-03 07:18:09
【问题描述】：

我正在尝试创建一个点导航（类似于在整页滑块 here on w3 schools 上看到的）但是我似乎无法垂直堆叠这些点并在页面右侧居中

我在这里尝试了很多可用的答案（链接如下），但似乎没有一个有效。

(Using margin:auto to vertically-align a div, Vertically center ul in div, How do i center li element in ul vertically? css, How to force a list to be vertical using html css)

li 标记中的显示块有效，但随后元素显示为它们自己的部分，而不是在用户滚动时显示在背景图像的顶部。也许有些矛盾，我似乎无法确定。

谢谢

HTML 和 CSS

.container {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
}

nav {
   position: absolute;
   top: 6px;
   right: 12px;

}

nav ul {
    /* position: relative; */
   display: flex;
   align-items: center;
   margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;


}

nav li {
    position: relative;
    display: inline;
    margin: 0 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

nav li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
   position: relative;
    border-radius: 50%;
    background-color: rgba(155,155,155,0.3);
    text-indent: -999em;
    cursor: pointer;
    position: absolute;
}

<div class="container">
<nav>
    <ul>
       <li><a href="#home">Home</a></li>
       <li><a href="#portfolio">Portfolio</a></li>
       <li><a href="#about us">About us</a></li>
       <li><a href="#contact">Contact</a></li>
     </ul>
</nav>

<section>
</section>

</div>

【问题讨论】：

您发布的 HTML 无效。确保正确关闭所有引号和标签！ :)
您还必须更改现在为白色的点的背景颜色
rgba(255,255,255,0.3) 是不透明度为 0.3 的白色。请用可见的颜色更改它或更改容器的背景颜色以使点可见

标签： html css

【解决方案1】：

您的 html 代码中有错误 <div class="container> 必须是 <div class="container"> 而这个 <li><a href="#about us" class="space-item">About us/a></li> 必须是 <li><a href="#about us" class="space-item">About us</a></li>

检查这个sn-p

.container {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
}

nav {
   position: absolute;
   top: 6px;
   right: 12px;

}

nav ul {
    /* position: relative; */
   display: flex;
   align-items: center;
   margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;


}

nav li {
    position: relative;
    display: inline;
    margin: 0 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

nav li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
   position: relative;
    border-radius: 50%;
    background-color: lightgrey;
    text-indent: -999em;
    cursor: pointer;
    position: absolute;
}

<div class="container">
<nav>
    <ul>
       <li><a href="#home" class="space-item">Home</a></li>
       <li><a href="#portfolio" class="space-item">Portfolio</a></li>
       <li><a href="#about us" class="space-item">About us</a></li>
       <li><a href="#contact" class="space-item">Contact</a></li>
     </ul>
</nav>

<section>
</section>

</div>

【讨论】：