0

Estoy haciendo un footer https://jsfiddle.net/4fcx6r92/:

#footer-container{
    width: 100%;
    height: 5vw;
    background: #e5e4e2;
    color: #4c5c68;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.shortcuts-container{
    border: 3px solid red;
    align-items: center;
    margin-left: 24vh;
}
.check-btn-container{
    display: flex;
    flex-direction: row;
    border: 3px solid red;
    align-items: center;
    margin-right: 24vh;
}
#check-answer{
    height: 50%;
    margin-left: 2%;
}
 <footer>
        <div id="footer-container">
            <div class="shortcuts-container">
                <h4>Mejora tu tiempo con los <a href="#">atajos de teclado</a></h4>
            </div>
            <div class="check-btn-container">
                <h4>PULSA INTRO PARA</h4>
                <button id="check-answer">Comprobar</button>
            </div>
        </div>
        
    </footer>

En el #check-btn-container actualmente el CSS hace saltar la letra "PARA" hacia abajo. Quiero que la frase "PULSA INTRO PARA" aparezca en una sola linea.

Ocurrió cuando puse margin-left en el botón "Comprobar"; entonces la linea no tiene espacio suficiente y por eso salta. El problema es que estoy usando flexbox en en el #check-btn-containerasí que no puedo sustituir el margin-left por el incrementar el ancho del div (por ejemplo), ya que entonces el boton se ensancha.

He intentado el incrementar la anchura del div con padding, pero no hace que la linea salga en una sola. Nada cambia al incrementar el padding.

Importante: Necesito que haya margen/espacio entre la frase y el botón obligatoriamente.

2 respuestas 2

1

para evitar que el texto te haga saltos de linea podrias utilizar la propiedad white-space: nowrap que evita los saltos de linea. En tu caso podrias añadir

.check-btn-container>h4{
  white-space: nowrap;
}

Espero que te sirva.

#footer-container{
    width: 100%;
    height: 5vw;
    background: #e5e4e2;
    color: #4c5c68;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.shortcuts-container{
    border: 3px solid red;
    align-items: center;
    margin-left: 24vh;
}
.check-btn-container{
    display: flex;
    flex-direction: row;
    border: 3px solid red;
    align-items: center;
    margin-right: 24vh;
}
.check-btn-container>h4{
  white-space: nowrap;
}
#check-answer{
    height: 50%;
    margin-left: 2%;
}
<footer>
   <div id="footer-container">
       <div class="shortcuts-container">
           <h4>Mejora tu tiempo con los <a href="#">atajos de teclado</a></h4>
       </div>
       <div class="check-btn-container">
           <h4>PULSA INTRO PARA</h4>
                <button id="check-answer">Comprobar</button>
       </div>
  </div>            
</footer>

1

algo simple que puedes hacer para que se vea como tú quieres es al tag check-btn-container, agregarle un with de 260px. Con eso hice que la caja contenedora sea un poco más ancha y tu texto se vea en una sola linea, el código sería:

.check-btn-container{
    display: flex;
    flex-direction: row;
    border: 3px solid red;
    align-items: center;
    margin-right: 24vh;
    width: 260px;
}

Para que el botón se distancie un poco más del texto le aumenté en 5% el margin-left:

#check-answer{
    height: 50%;
    margin-left: 5%;

}

Prodrías ver un poco de bootstrap ACÁ ya que es un framework que es para diseñar página web.

Saludos

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.