Align two lower left and right margin buttons

Question

Align two lower left and right margin buttons

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have a body with X detailed information collecting data from several .php files with connections to a database.

I want to add to this file .php two buttons, "Back" and "Next". I want both buttons to be in the lower left margin (Back) and the lower right margin (Next).

How should the style be added so that both buttons are at the same level but each one on one side?

For each button must there be a form or can it be a set? I have to say that the functionality of each button is different.

<form action="reservar.php" name="mireserva" id="mireserva" method="POST" style="text-align:center">
    <input type="submit" value="Atrás" name="atras" id="atras">
</form>
<form action="confirmar.php" name="miconfirmar" id="miconfirmar" method="POST" style="text-align:center">
    <input type="submit" value="Confirmar" name="confirmar" id="confirmar">
</form>

html css

asked by omaza1990 22.11.2017 в 00:13

source

2 answers

1

Here I leave you as the styles should be so that you have the two buttons on each side, at the bottom.

The key is in the position: absolute property and in giving each button the position.

I hope it helps.

#atras,
#confirmar {
  position: absolute;
  background: skyblue;
  color: black;
  padding: 10px;
  border-radius: 5px;
  bottom: 10px;
  text-decoration: none;
}
#atras:hover,
#confirmar:hover {
  background: rgba(135, 206, 235, 0.8);
  color: blue;
  cursor: pointer;
}

#confirmar {
  right: 10px;
}

#atras {
  left: 10px;
}

<form action="reservar.php" name="mireserva" id="mireserva" method="POST" style="text-align:center">
    <input type="submit" value="Atrás" name="atras" id="atras">
</form>
<form action="confirmar.php" name="miconfirmar" id="miconfirmar" method="POST" style="text-align:center">
    <input type="submit" value="Confirmar" name="confirmar" id="confirmar">
</form>

answered by 22.11.2017 в 00:44

HashMap in java, error counting elements Error trying to use Collections.sort on an ArrayList

score 1 · Accepted Answer

Use the benefits of flexbox : You can enclose the two buttons in a div to have better control of both (I have called it with the class keypad ) and this container apply display: flex , then add a justify-content: space-between , which will separate both elements from each other according to the size set for the container. And that's it, it's simple.

To that container within the form, you can give it a width of 100% so that it is at the top of the form's borders or define a size according to your convenience.

Another thing, you do not need two input to have several buttons inside the form. Keep in mind that the input is the one that captures and sends information, but if you only need a link to another page, etc, with <a></a> it's enough and enough.

Here's an example:

/*Es aquí donde sucede la separación de ambos*/

form {
  margin: 30px auto;
  width: 600px;
}

.botonera {
  display: flex;
  justify-content: space-between;

  width: 100%;
}

/* Apariencia de los botones */ 
.boton {
  padding: 10px;
  border: 0;
  background: red;
  font-size: 1.2em;
  color: #FFF;
}

.boton-atras {
  text-decoration: none;
}

<form action="reservar.php" name="mireserva" id="mireserva" method="POST" style="text-align:center">
  
  <!-- Contenedor al que se le aplica flexbox -->
  <div class="botonera">
	  
    <!-- Botón para ir atrás -->
    <a href="atras.html" id="atras" class="boton boton-atras">Atrás</a>
    
    <!-- Botón para confirmar -->
    <input type="submit" value="Confirmar" name="confirmar" id="confirmar" class="boton">

  </div> <!-- Fin del contenedor -->

</form>

I advise you to read a little about what flexbox is, so that you can take your designs with no headaches: Flexbox

Greetings!