I am wanting to build a list horizontally only using Css. The problem is that so that they are in Horizontal I am doing it like this:
header li{
float: right;
padding-right: 10%;
}
header{
color: white;
padding: 30px;
font-size: 15px;
border: 2px solid black;
background-color: rgb(1, 189, 190);
font-size: 16px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
But I want it centered, horizontal, and with space between the list data:
<header>
<nav>
<ul>
<li><a href="">Banana</a></li>
<li><a href="">Pera</a></li>
<li><a href="">Sandia</a></li>
<li><a href="">Manzana</a></li>
</ul>
</nav>
</header>
How can I do it?
There are many ways to do it, including centering with automatic margin on the horizontal axis, this option is doing it with flexbox, I leave some comments so you can better understand what was done.