Este es mi código:

<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
  <input type="submit" class="btn btn-link" value="delete">
</form>

Me gustaría alinear las dos entradas. Como es eso posible ?

Actualización: Debido a que debería tener una salida dentro del formulario, agregué otra entrada fuera de él, porque ambos enlaces deberían tener el mismo aspecto.

0
4m1nh4j1 26 sep. 2019 a las 17:02

6 respuestas

La mejor respuesta

Simplemente puede hacer que el formulario se muestre en línea.

form{
  display:inline;
}
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">
  <input type="submit" class="btn btn-link" value="delete">
</form>
0
darkhouse 26 sep. 2019 a las 14:07

Simplemente coloque la etiqueta de entrada dentro del formulario

<form action="" id="delete_reply">
  <input class="btn btn-link" value="reply">
  <input type="submit" class="btn btn-link" value="delete">
</form>

O si desea simplemente mantener la estructura html como está y agregar

form {
  display: inline;
}
<input class="btn btn-link" value="reply">
<form action="" id="delete_reply">

  <input type="submit" class="btn btn-link" value="delete">
</form>
-1
Charlene Vas 26 sep. 2019 a las 14:06

Simplemente mueva la primera entrada dentro de la etiqueta del formulario.

<form action="" id="delete_reply">
  <input class="btn btn-link" value="reply">
  <input type="submit" class="btn btn-link" value="delete">
</form>

O use display: bloque en línea

<style>
  .btn btn-link {
     display: inline-block;
   }
</style>
0
TimTim 26 sep. 2019 a las 14:34

Podría lograr esto envolviendo el contenido dentro de un contenedor div configurando el ancho a él y a su formulario y usando flex-box de esta manera:

<div class="inputs">
  <input type="text">
    <form action="">
      <input type="text">
    </form>
</div>

Y

.inputs {
  width: 100%;
  display: flex;
}

.inputs form {
  width: 400px;
}
1
ChechoCZ 26 sep. 2019 a las 14:12

Modifiqué un poco tu código. Comprueba que podría ayudarte.

.form-container{
text-align:center;
}
<div class="form-container">
<form action="" id="delete_reply">
  <input class="btn btn-link" value="reply">
  <input type="submit" class="btn btn-link" value="delete">
</form>
</div>
1
Vikas Patel 26 sep. 2019 a las 14:08

Agregue float: left; a sus dos entradas.

-1
PersyJack 26 sep. 2019 a las 14:42