Space between menu items
Question
I'm trying to make menu on top bar but I want to make a little bit of space between each element. How can I make some space between each menu item?
.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>
3 answers
solution1
0 2022-09-20 21:57:46
You should also add some styling to the a links. Adding :not(:first-of-type) makes sure this will only happen from the second item and onward
.TopMenu a:not(:first-of-type) {
padding-left: 8px;
}
solution2
0 ACCPTED 2022-09-20 22:00:54
Since you are using a flexbox container you can use the gap on your flex element as follows:
.TopMenu {
gap: 10px;
}
solution3
0 2022-09-20 22:04:41
Just switch justify-content to 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>
See it in jsfiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to reduce the space between the dropdown menu items?
How do I reduce the space between my menu titles and items?
Why isn't there space between my menu items?
How to make space between menu items in CSS/HTML
Reduce Vertical space between menu items when wrap occurrs
Space between menu and submenu
Space between flex items
Space between items in bootstrap
Spaces between menu items
How do I reduce the horizontal space between my menu items [Home, About Us,…] is CSS?
Related Tags