Agregar espacio entre elementos [cerrado]
Tengo un elemento .nav-bar que es un elemento secundario con la propiedad
display:flex;
justify-content:space-evenly
Cuando configuro el elemento de encabezado, que es el padre con la propiedad, los elementos secundarios del elemento .nav-bar tienden a unirse.
display:flex;
justify-content:space-between;
Sin embargo, eliminar la propiedad de visualización del encabezado parece resolver el problema parcialmente. Además, cuando se utiliza la propiedad de espacio en el elemento .nav-bar, todo parece estar bien, los elementos secundarios están espaciados. ¿Por qué es esto?
<!----CSS--FILE---->
header {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-bar {
list-style: none;
display: flex;
gap: 3rem;
}
<!--javascript-file-->
<header>
<img src="https://picsum.photos/id/237/200/300" width="40px" />
<ul className="nav-bar">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<!-- end snippet -->
Aceptado
Debe reemplazar className por clase en su HTML. Aún puedes usar el espacio de manera uniforme en tu barra de navegación. (también puedes establecer un ancho para tu .nav-bar:100% para que cubra todo el espacio libre)
header {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-bar {
width:100%;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 3rem;
}<header>
<img src="https://picsum.photos/id/237/200/300" width="40px" />
<ul class="nav-bar">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>Expandir fragmento
