Resulta que tengo este nav
:
.insidenav{
display: flex;
padding: 10px 0px 10px 0px;
font-size: 0.9em;
font-family: 'Lato', sans-serif;
border-bottom: 1px solid #E3E3E3;
}
.firstnav{
display: flex;
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.alaizq{
margin-right: 20px;
}
.aladcha{
margin-left: 35%;
}
.aladcha2{
margin-left: 20px;
}
<nav id="navonlyinfull">
<div class="insidenav">
<div class="firstnav">
<li class="margin-check alaizq" style="list-style-type: none"><a href="#">Buscar empleos</a></li>
<li class="alaizq" style="list-style-type: none"><a href="#">Valoraciones de empresa</a></li>
<li class="alaizq" style="list-style-type: none"><a href="#">Buscar candidatos</a></li>
<li class="alaizq" style="list-style-type: none"><a href="#">Empresas/Publicar empleos</a></li>
<li class="aladcha" style="list-style-type: none"><a href="#">Publica tu CV</a></li>
<li class="aladcha2" style="list-style-type: none"><a href="#">Iniciar sesión</a></li>
</div>
</div>
</nav>
Pues tengo el problema de que cuando me pongo a estrechar la anchura de la pantalla, aunque en la nav
todavía hay espacio de sobra los < li >
se rompen hacia la siguiente linea. Me explico: Por ejemplo en "Empresas/Publicar empleos", Publicar empleos baja hacia la siguiente linea, como si se hubiese agotado el espacio de la navbar
y entonces el programa debe bajar la segunda palabra hacia abajo para que todo entre bien sin reducir el fontsize
. Sin embargo si hay espacio.
He probado a dividir y hacer dos divs
diferentes. Uno para los li
donde tengo puesto la clase "alaizq
" y otro div
para los li
que tengo la clase "aladcha
". Incluso poniendo una anchura muy grande en ambos div
, me sigo ocurriendo el mismo problema.
display: inline-block
li
con clasealadcha
. Si inspeccionas el código en cualquier navegador, ese margen está ocupando todo el hueco que parece sobrar entre ambos bloques y, por lo tanto, no hay suficiente como para que el texto de cadali
se muestre entero en una única línea. Te aconsejaría separarlos en dos bloques y trabajar con ellos por separado.