行内块项目堆叠在彼此之上

Question

我已经摆弄这段代码几个小时了，我想不通。

我正在尝试创建单行导航 links（总共 9 行，如果相关的话），第一个 link 锚定在屏幕的左侧，其他的link一个接一个向右（像一行文字）。

我的 link 都在同一个地方叠在一起。我做错了什么，他们不会出现在一行中？

.logo {
     font-family: 'Work Sans';
     font-weight: 100;
     font-size: 150px;
     color: #B5B5B5;
     position: absolute;
     margin-top: 25px;
     text-align: right;
}
 .logo::before {
     content: '////////////////////////////////////////////';
     font-weight: 300;
     letter-spacing: 4px;
     font-size: 25px;
     color: #ff00ff;
}
.navs a {
    box-sizing: border-box;
    display: inline;
    position: absolute;
    left: 0;
    margin: -10px 15px 0px;
    width: 135px;
    border-bottom:1px solid #333;
    padding:6px;
    font:14px 'share tech mono';
    text-transform:uppercase;
    letter-spacing:1px;
    color:#B5b5b5;
    text-align: left;

}

<div class="logo">
                    STICTION

                    <div class="navs"><a href="/">QUICK-START</a> <a href="/">RULES</a></div></div>

如果这些代码不足以诊断问题，我可以提供更多。

Answer 1

问题的原因是 'position: absolute' 属性 .navs a 元素。

位置：绝对；

使元素出现在屏幕上的确切位置，从而使相同 class 的不同元素堆叠在一起。

问题可以通过解决

要么删除 'position: absolute' 或
将属性更改为 'position: relative'

有关 'position' 的更多信息属性:

https://www.w3schools.com/cssref/pr_class_position.asp

行内块项目堆叠在彼此之上

In-line block items are stacked on top of each other

html

css

inline