css 在我的导航栏中,列表元素之间有一些奇怪的垂直空间,这是不应该的

bvk5enib  于 2023-03-25  发布在  其他
关注(0)|答案(3)|浏览(98)

Screenshot of the Marked Space正如你可以在屏幕上看到,有一些垂直空间之间的列表项,和idk我如何可以删除说的事情,我以前做过,但似乎找不到如何基于我的旧项目和互联网,是的,也许我只是哑巴,这是显而易见的,如果我有答案lmao.提前感谢您的回答.
网址:

<header>
    <nav>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Wiki</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Join the Team</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </nav>
</header>

样式表:

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background-color: rgba(32,39,50,1.00);
    overflow: hidden;
}

li, a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
}

header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
}
.nav-links{
    list-style: none;
}
.nav-links li{
    display: inline-block;
    padding: 20px 20px;
}
.nav-links li a{
    transition: all 0.3s ease 0s;
}
.nav-links li a:hover{
    color: rgba(224,88,255,1.00)
}

以为是溢出:隐藏,但这只摆脱了一些溢出我有在右边,这是好的,但不是解决方案。我只是扫描了一个小时,通过一个旧项目,我有整理,但只是没有发现它,感觉非常愚蠢的rn。

vohkndzv

vohkndzv1#

内联元素之间有空格,除非在HTML中它们之间没有空格。有a number of potential solutions,但我最喜欢的是使用flexbox。

yhived7q

yhived7q2#

将:.nav-links li{ display: inline-block; padding: 20px 20px; }更改为:.nav-links li { display: inline; padding: 20px 20px 0 0; }并从*{}中删除padding: 0px; margin: 0px;

x8diyxa7

x8diyxa73#

.nav-links li{ display: inline-block; padding: 20px 20px; }更改为.nav-links li { display: inline; padding: 20px 20px 0 0; }确实做到了这一点,并删除了我的元素之间的空格。关于inline-block创建了这些空格,但我建议大家使用Flexbox,您可以在这里轻松学习:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关问题