Question

我已经花了几个小时来摆弄这段代码，我无法弄清楚。

我正在尝试创建单行导航链接（如果有的话，总共9条），第一个链接锚定在屏幕的左侧，而其他链接则紧接在屏幕的左侧（例如一行）。

我的链接都堆叠在同一位置。我做错了，他们不会出现在一行中？

.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

问题的原因是由于 .navs a 元素的 'position：absolute' 属性

位置：绝对；

使元素出现在屏幕上的确切位置，从而使同一类别的不同元素看起来像一个堆叠在一起。

问题可以通过

解决

删除“ position：absolute” 或
将属性更改为“位置：相对”

有关“位置”属性的更多信息：

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

内联块项目彼此堆叠

1 个答案: