0

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.

3
  • Prueba poniendoles un display: inline-block
    – JDev
    Commented el 12 mar. 2019 a las 16:24
  • 1
    Tienes varios errores, entre ellos uno bastante importante que es el tener <li> cuyo padre no sea un <ul> un <ol> o un <menu>. Esto hará que su comportamiento sea erroneo, no pudiendo darles, por ejemplo, un width en píxeles fijo, que es justo lo que necesitas.
    – phpMyGuel
    Commented el 12 mar. 2019 a las 16:33
  • 1
    A parte de lo que PHPMyguel ha dicho, cosa que es bastante importante, el problema viene a raíz del margen en porcentaje que tiene el li con clase aladcha. 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 cada li se muestre entero en una única línea. Te aconsejaría separarlos en dos bloques y trabajar con ellos por separado.
    – Rabegi
    Commented el 12 mar. 2019 a las 16:37

1 respuesta 1

0

Algo así quieres, solo sirve en pantalla completa por que en pantallas menores no hay forma de que no se corte

.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;
}
.firstnav li{flex: 1 1 auto;}
.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>

3
  • Por supuesto que hay formas de que no se corte. Para eso existen las MediaQueries.
    – user119854
    Commented el 14 mar. 2019 a las 14:53
  • Si claro pero en este ejemplo no es posible, según como esta la estructura Commented el 14 mar. 2019 a las 14:53
  • Claro que es posible, qué es lo que lo impide? Solamente tiene que añadir @media a su CSS con las especificaciones.
    – user119854
    Commented el 14 mar. 2019 a las 14:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.