1

estoy en un proyecto y Tengo un texto en el lado izquierdo, pero no puedo posicionar un botón al lado derecho y que queden alineados.ojala me puedan ayudar.

.right{
    float: left;
    text-align: right;
    width: -50%;
    height: -50%;
}

.boton{
    border: 1px solid;
    padding: 5px;
    background-color: #0271CD;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Helvetica', sans-serif;
    border-radius: 1px;
 
}
 <div class="container">
    <a>
        <h1>Proyectos</h1>
    </a>
    <div class="right">
        <a href="./Nueva-Empresa.html" class="boton" target="_blank">
            <i class="fas fa-  plus-circle"></i> Nuevo</a>
    </div>
    <hr>
</div>

4
  • 1
    Hola algo así? jsfiddle.net/7d2cLjo4/17 Commented el 3 feb. 2022 a las 16:10
  • claro algo asi, pero que el boton quede al otro extremo, nose si me explico Commented el 3 feb. 2022 a las 16:19
  • 1
    Las medidas no pueden ser negativas, esos -50% hacen que las reglas sean ignoradas. Por otra parte, el encabezado toma todo el ancho disponible y hace que el botón se baje. Flota solo el primer elemento (el de la izquierda) y el otro se colocará automáticamente a la derecha.
    – Triby
    Commented el 3 feb. 2022 a las 16:20
  • 1
    @RenattaQuiroz entiendo, asi? jsfiddle.net/7d2cLjo4/19 igual verifica la respuesta que te dieron Commented el 3 feb. 2022 a las 16:24

2 respuestas 2

2

La etiqueta <h1> incluye un salto de linea al final de la etiqueta si no recuerdo mal.

Colocando dos <divs> con float:left deberías conseguir lo que buscas.

Con tan solo esto ya lo he logrado:

#h1{
    float:left;
}
.right{
    float: left;
    text-align: right;
    width: -50%;
    height: -50%;
}

.boton{
    border: 1px solid;
    padding: 5px;
    background-color: #0271CD;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Helvetica', sans-serif;
    border-radius: 1px;
 
}
<html>
<head>
    <title>Mi web de pruebas</title>
</head>
<body>
    
<div class="container">
            <a>
                <div id="h1">Proyectos</div>
            </a>
            <div class="right">
                <a href="./Nueva-Empresa.html" class="boton" target="_blank"><i class="fas fa-  plus-circle"></i> Nuevo</a>
            </div>
            <hr>
        </div>

</body>
</html>

0

Tambien puedes hacer uso de flex aplicado al contenedor de los elementos

.contenedor {
  width: 100%;
  display: flex;
  align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="contenedor">
  <h1>Lorem ipsum</h1>
  <button class="btn btn-primary ml-4" type="button">Button</button>
</div>

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.