Menu spacing help

Question

Menu spacing help

Navigation

#1 by (1 votes)

0

Well I'm trying to make a menu where I have, start / over / shop and then a space and the "fetch" and another space and a login / register, but I can not. Could someone help me?

<header>
<div class="logobg"><img src="images/logosecure.png"></div> 
<div class="menubarr">
<nav class="menubarr">
<ul>
<a href="#"><li>Inicio</li></a>
<a href="#"><li>Sobre</li></a>
<a href="#"><li>Loja</li></a>
<a href="#"><li>Contato</li></a>
</ul>
</nav>

<nav class="buscar">
<ul>
<a href="#"><li>Buscar</li></a>
</ul>
</nav>

<nav class="log">
<ul>
<a href="#"><li>Cadastrar</li></a>
<a href="#"><li>Login</li></a>
</ul>
</nav>
</div>
</header>

css:

*{margin:0;padding:0;}
header{
    width: 100%;
    height: auto;

}
section{
    width: 100%;
    height: 500px;
    background: #ccc;
}
footer{
    width: 100%;
    height: 50px;
    background: #000;
}
a{
    text-decoration: none;
}

.logobg{
    width: 1280px;
    margin:0 auto;
    background: #fff;
}

.logobg img{
    width: 100px; height: 100px;
}

 .menubarr{
    width: 1280px;
    margin:0 auto;
    background: #000;
}

.menubarr nav ul li{
    background: #000;
    color:#fff;
    display: inline-block;
    padding: 10px 20px;
    border-bottom: 2px solid #000;
}

 .menubarr nav ul li:hover{
    cursor: pointer;
    border-bottom: 2px solid #fff;
}

As it is currently:

html css

asked by anonymous 23.09.2018 / 20:24

1 answer

How to parse from one list of objects to another? How to import classes from another package

score 1 · Accepted Answer

Try this:

In a div that includes all <ul> , define a class name ('block-menu', in this case):

<div class='bloco-menu'>

<nav class="menubarr">
<ul>
<a href="#"><li>Inicio</li></a>
<a href="#"><li>Sobre</li></a>
<a href="#"><li>Loja</li></a>
<a href="#"><li>Contato</li></a>
</ul>
</nav>

<nav class="buscar">
<ul>
<a href="#"><li>Buscar</li></a>
</ul>
</nav>

<nav class="log">
<ul>
<a href="#"><li>Cadastrar</li></a>
<a href="#"><li>Login</li></a>
</ul>
</nav> 

</div>

After that, in CSS, do so:

   .bloco-menu{
    display: flex;
}

li{
    display: inline-flex;

}
ul{
    padding-left: 1px;
}

The display property: inline-block that will make them side by side.

Note: padding of <ul> is optional, so I put <ul>´s has a default padding-left of approximately 5px, creating a whitespace between each ul , case these are side by side.