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。
3条答案
按热度按时间vohkndzv1#
内联元素之间有空格,除非在HTML中它们之间没有空格。有a number of potential solutions,但我最喜欢的是使用flexbox。
yhived7q2#
将:
.nav-links li{ display: inline-block; padding: 20px 20px; }
更改为:.nav-links li { display: inline; padding: 20px 20px 0 0; }
并从*{}
中删除padding: 0px; margin: 0px;
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/