菜单项之间的间距

我试图在顶部栏上制作菜单，但我想在每个元素之间留出一点空间。如何在每个菜单项之间留出一些空间？

.TopMenu {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 40px
}

<div class="TopMenu">
<a class="active" href="#home">Inicio</a>
<a href="#tecnologias">Tecnologias Que Trabajamos</a>
<a href="#labs">Labs</a>
<a href="#contacto">Contacto</a>
<a href="#legal">Legal</a>
</div>

由于使用的是flexbox容器，因此可以在flex元素上使用gap属性，如下所示：

.TopMenu {
gap: 10px;
}

您还应该为a链接添加一些样式。添加:not(:first-of-type)可以确保这只会从第二个项目和开始发生

.TopMenu a:not(:first-of-type) {
padding-left: 8px;
}

只需将justify-content切换到space-between

.TopMenu{
display: flex;
align-items: center;
width: 50%;
height: 40px;
justify-content: space-between;
}

<html>
<body>
<div class="TopMenu">
<a class="active" href="#home">Inicio</a>
<a href="#tecnologias">Tecnologias Que Trabajamos</a>
<a href="labs">Labs</a>
<a href="contacto">Contacto</a>
<a href="#legal">Legal</a>
</div>
</body>
</html>

在jsfiddle 中查看

相关内容

最新更新

热门标签：