3

Dispongo de un div en el cual tengo una información cualquiera "x", y a su vez, existen dos botones.

Un botón para cancelar una reserva y otro botón para realizar una reserva.

Quiero que ambos botones estén al lado con una separación de 4 espacios (padding: 4px).

¿Por qué se coloca uno debajo del otro?

                echo "<div id='detalles_reserva'>";
                echo 
                    "<img src='imagenes/cabaña.png' height='22px' width='22px' alt='cabaña'>&nbsp;&nbsp;Cabaña: ".$idcabana."
                    <br/><br/>".
                    "<img src='imagenes/email.png' height='22px' width='22px' alt='cabaña'>&nbsp;&nbsp;Email: ".$idemail."
                    <br/><br/>".
                    "<img src='imagenes/calendario.jpg' height='22px' width='22px' alt='check_in'>&nbsp;&nbsp;Check_in: ".$check_in."
                    <br/><br/>".
                    "<img src='imagenes/calendario.jpg' height='22px' width='22px' alt=check_out'>&nbsp;&nbsp;Check_out: ".$check_out."
                    <br/><br/>".
                    "<img src='imagenes/personas.jpg' height='22px' width='22px' alt='personas'>&nbsp;&nbsp;Personas: ".$personas."
                    <br/><br/>".
                    "<img src='imagenes/euros.jpg' height='22px' width='22px' alt='pago_total'>&nbsp;&nbsp;Pago total: ".$pago_total."€
                    <br/><br/>".
                    "<input type='submit' name='cancelar' id='cancelar' value='CANCELAR PAGO'> &nbsp;&nbsp;&nbsp;&nbsp; <input type='submit' name='mireserva' id='mireserva' value='REALIZAR PAGO'>";
                echo "</div>";

Código CSS:

#detalles_reserva{
    margin: auto;
    width: 50%;
    max-width: 500px;
    max-height: 900px;
    background: #F3F3F3;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.2);
    font-weight: bold;
}

#detalles_reserva input {
    margin: auto; 
    display: block;
    width: 150px;
    height: 40px;
}

input[type="submit"] {
    border: 0.8;
    font-weight: bold;
    color: red;
    opacity: 0.9;
    cursor: pointer;
    border-radius: 20px;
    margin-bottom: 0;
}
5
  • Probaste con display inline o inline-block? Así: #detalles_reserva input { margin: auto; display: inline-block; o inline; el 8 ene. 2018 a las 17:20
  • Con display: inline-block, se sitúan en la misma línea pero en el margen izquierdo, uno a continuación del otro.
    – omaza1990
    el 8 ene. 2018 a las 17:23
  • "Quiero que ambos botones estén al lado con una separación.." Disculpa había entendido eso, pero como los quieres. En el margen derecho? En el medio? O si tuviera un mockup mejor. el 8 ene. 2018 a las 17:27
  • Ambos en la misma línea con una separación de x px pero en el CENTRO de la línea del div.
    – omaza1990
    el 8 ene. 2018 a las 17:35
  • Creo que lo que necesitas es asignarle un float left a cada boton
    – Alejandro
    el 11 ene. 2018 a las 14:08

5 respuestas 5

2

Primero quita del estilo #detalles_reserva input la linea del display: block;

te quedaria asi

#detalles_reserva input {
margin: 4px;/* dar espacio entre botones */
width: 150px;
height: 40px;
}

En vez de colocar un

padding: 4px

coloca un

margin:4px;

Con el padding lo que haces es que expandes la parte de afuera del elemento sin alterar sus margenes, si utilizar margin estas empujando el contenido de sus alrededores.

NOTA: Para centrar el contenido solo debes colocar los botones dentro de un div de la sigueinte manera

<div class="centrar_contenido">
<input type='submit' name='cancelar' id='cancelar' value='CANCELAR PAGO'> &nbsp;&nbsp;&nbsp;&nbsp; <input type='submit' name='mireserva' id='mireserva' value='REALIZAR PAGO'>
</div>

y la clase 'centrar_contenido'

.centrar_contenido{
    text-align: center;
}
4
  • Tu código no es válido debido a que si elimino "display:block, se ajusta al margen izquierdo, y quiero que se centre.
    – omaza1990
    el 8 ene. 2018 a las 19:41
  • @omaza1990 no era necesario el boto negativo, solo tenias que decirlo, agregando un div a los botones y agregando esta clase lo resuelve .centrar_contenido{ text-align: center; } <div class="centrar_contenido"><input type='submit' name='cancelar' id='cancelar' value='CANCELAR PAGO'> &nbsp;&nbsp;&nbsp;&nbsp; <input type='submit' name='mireserva' id='mireserva' value='REALIZAR PAGO'> </div> el 8 ene. 2018 a las 19:53
  • ¿Acaso yo voté negativamente?... Dije únicamente que no me valía, no di el voto en rojo.
    – omaza1990
    el 8 ene. 2018 a las 19:55
  • @omaza1990 de todos modos es irrelevante mencionarlo, disculpa. Indícame si ahora te funciona. el 8 ene. 2018 a las 19:58
1

no se, si ya has solucionado el problema, pero como aún no ha habido una respuesta válida, agrego lo siguiente:

#detalles_reserva{
    margin: auto;
    width: 50%;
    /*opcional*/
    min-width: 325px;
    max-width: 500px;
    max-height: 900px;
    background: #F3F3F3;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.2);
    font-weight: bold;
}

#detalles_reserva input {
    box-sizing: border-box;
    margin: auto; 
    /*cambia block por inline-block*/
    display: inline-block;
    width: 150px;
    height: 40px;
}

#detalles_reserva input[type="submit"] {
    /*El estilo de borde, no se aplica porque esta mal*/
    border: 0.8;
    /*agregue de nuevo el borde pero corregido*/
    border: 1px solid;
    font-weight: bold;
    color: red;
    opacity: 0.9;
    cursor: pointer;
    border-radius: 20px;
    margin-bottom: 0;
}

.center{/*o la clase como la hayas llamado*/
    text-align: center;
}
/*Esto de abajo lo puedes ignorar, solo lo agrego por razones esteticas*/
#detalles_reserva img{
     display: inline-block;
     width: 20px;
     height: 20px;
     border: solid 1px;
}
<div id='detalles_reserva'>
  <img src='imagenes/cabaña.png' height='22px' width='22px' alt=''>&nbsp;&nbsp;Cabaña: ".$idcabana."
  <br/><br/>
  <img src='imagenes/email.png' height='22px' width='22px' alt=''>&nbsp;&nbsp;Email: ".$idemail."
  <br/><br/>
  <img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Check_in: ".$check_in.
  <br/><br/>
  <img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Check_out: ".$check_out."
  <br/><br/>
  <img src='imagenes/personas.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Personas: ".$personas."
  <br/><br/>
  <img src='imagenes/euros.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Pago total: ".$pago_total."
  <br/><br/>
  <div class="center">
    <input type='submit' name='cancelar' id='cancelar' value='CANCELAR PAGO'> &nbsp;&nbsp;&nbsp;&nbsp; <input type='submit' name='mireserva' id='mireserva' value='REALIZAR PAGO'>
  </div>
</div>

Como ves, lo único que he hecho es como te han recomendado cambiar el block por el inline-block. Agregar un div alrededor de los inputs y centrar el contenido de este div.

Por cierto, también agregue min-width: 325px al contenedor #detalles reserva, ya que la ventana de stackoverflow de ejecución es poco ancha, por lo que el 50% de esta era menor a 325px y por eso el segundo input bajaba en este demo.


Lo anterior es una solución sencilla a tu problema y que se ajusta a tu código, pero para que no quede igual que la respuesta anterior y por si te preguntas si hay una forma de hacerlo sin usar un div contenedor, te ofrezco esta otra alternativa más moderna aunque un poco más compleja de entender:

#detalles_reserva{
    margin: auto;
    width: 50%;
    /*opcional*/
    min-width: 325px;
    max-width: 500px;
    max-height: 900px;
    background: #F3F3F3;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.2);
    font-weight: bold;
}

#detalles_reserva input {
    box-sizing: border-box;
    margin: auto; 
    /*cambia block por inline-block*/
    display: inline-block;
    --x: 150px;
    width: var(--x);
    height: 40px;
}

input#cancelar {
    --y: 10px;
    --n: 2; /*numero de inputs, en este caso 2*/
    margin-right: var(--y);
    --mitad: calc( ( var(--x) * var(--n) ) / 2 );
    /* o la suma de todos los inputs dividida entre 2*/
    --mitad-y: calc( var(--y) / 2 );
    /* o  la mitad del margen de separación entre los inputs*/
    margin-left: calc(50% - (var(--mitad) + var(--mitad-y) ) );
}

#detalles_reserva input[type="submit"] {
    /*El estilo de borde, no se aplica porque esta mal*/
    border: 0.8;
    /*agregue de nuevo el borde pero corregido*/
    border: 1px solid;
    font-weight: bold;
    color: red;
    opacity: 0.9;
    cursor: pointer;
    border-radius: 20px;
    margin-bottom: 0;
}

/*Esto de abajo lo puedes ignorar, solo lo agrego por razones esteticas*/
#detalles_reserva img{
     display: inline-block;
     width: 20px;
     height: 20px;
     border: solid 1px;
}
<div id='detalles_reserva'>
  <img src='imagenes/cabaña.png' height='22px' width='22px' alt=''>&nbsp;&nbsp;Cabaña: ".$idcabana."
  <br/><br/>
  <img src='imagenes/email.png' height='22px' width='22px' alt=''>&nbsp;&nbsp;Email: ".$idemail."
  <br/><br/>
  <img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Check_in: ".$check_in.
  <br/><br/>
  <img src='imagenes/calendario.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Check_out: ".$check_out."
  <br/><br/>
  <img src='imagenes/personas.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Personas: ".$personas."
  <br/><br/>
  <img src='imagenes/euros.jpg' height='22px' width='22px' alt=''>&nbsp;&nbsp;Pago total: ".$pago_total."
  <br/><br/>
  <input type='submit' name='cancelar' id='cancelar' value='CANCELAR PAGO'> <input type='submit' name='mireserva' id='mireserva' value='REALIZAR PAGO'>
</div>

¿Que hice?

  1. Borrar los espacios en blanco en el html que separaban ambos inputs
  2. Al primer input le agregue un calculador de css y mediante una formula este siempre calculará cuanto empujar a este input a la derecha para que siempre quede centrado.

En pocas palabras esto:

input#cancelar {
    --y: 10px;
    --n: 2; /*numero de inputs, en este caso 2*/
    margin-right: var(--y);
    --mitad: calc( ( var(--x) * var(--n) ) / 2 );
    /* o la suma de todos los inputs dividida entre 2*/
    --mitad-y: calc( var(--y) / 2 );
    /* o  la mitad del margen de separación entre los inputs*/
    margin-left: calc(50% - (var(--mitad) + var(--mitad-y) ) );
}

Lo traducirá el navegador como:

input#cancelar {
    margin-right: 10px;
    margin-left: calc(50% - (150px + 5px) );
}

Siendo 150px la suma de ambos inputs entre 2 (300 / 2) + 5px, que es la mitad del margen agregado para separar ambos inputs. Con esta fórmula no importa cuanto agregues de margin de separación, siempre estará centrado.

Por cierto @Omaza1990 al ver tantos br y espacios &nbsp me dio un dejavú.

1

Una forma simple de separar botones. Y aplicando inline-block.

<!DOCTYPE html>
<html>

<head>
  <style>
    .XXX {
      list-style-type: none;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="XXX">
    <button href="#">BOTON1</a>
  <button href="#">BOTON2</a>
  <button href="#">BOTON3</a>
  <button href="#">BOTON4</a>
</div>
</body>
</html>

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 12 may. 2022 a las 7:46
0

En css, cualquier div, tiene por defecto la opcion block activa que lo que te hace es ocupara todo el ancho de la pantalla. Para que el div tenga un comportamiento como los elementos en linea, tienes que ponerle display:inline-block; para que ocupe solo el ancho que necesite y el resto pueda ser ocupado por otros elementos que cojan ahí. PD: si pones dos divs display:inline-block; y a uno le das el 40% del width y a otro el 60%, no se alinean aún poniendo margin, padding y border = 0px; yo lo soluciono o poniendo un div a float o con box-sizing: border-box;

Espero te sirva

-2

Es importante colocarle al div padre "display:inline-block" para poder centrarlo posteriormente a los botones.

1
  • Hola Franco, por favor incluye los ejemplos directamente en la respuesta. Aparte, enlazar páginas que no tienen que ver directamente con la pregunta en sí, que son principalmente publicidad de una compañía y sin indicar tu afiliación a las mismas se considera spam y es algo que no está permitido en Stack Overflow. Completa el recorrido de bienvenida y visita el código de conducta para más información.
    – Alvaro Montoro
    el 29 nov. 2018 a las 21:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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