Actualmente estoy haciendo una aplicación y estoy tratando de alinear los elementos de 3 formularios (25/25/50) quien sea, parece que no ha ido bien. Adjuntaré una imagen al final para mostrar cómo se ve ahora. Además, si es posible, ¿hay alguna forma de que pueda hacer que el elemento de 3 formas tenga un espacio entre ellos para que sea más fácil de leer e interpretar?

Between
<div class="ui-grid-e">
  <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
  <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>
  Comment
  <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
</div>

https://imgur.com/a/vlpbi/

0
user8911705 13 nov. 2017 a las 15:06

2 respuestas

La mejor respuesta

Solo actualiza tu marcado

.ui-grid-e {
position: relative;
width: 400px;
}

.ui-block-a,
.ui-block-b,
.ui-block-c {
box-sizing: border-box;
padding: 0 5px;
}

.ui-block-a{
padding-left: 0;
}

.title-c {
padding-left: 5px;
}

.ui-block-title{
box-sizing: border-box;
float: left;
width: 50%;
}

.ui-block-a,
.ui-block-b {
float: left;
width: 25%;
}

.ui-block-c{
float: left;
width: 50%;
}

input {
width: 100%;
}
<div class="ui-grid-e">
                     <div class="ui-block-title title-a-b">Between</div>
                     <div class="ui-block-title title-c">Comment</div>
                        <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
                        <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>
                        
                        <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
                    </div>
0
Ivan Karaman 13 nov. 2017 a las 12:26

Sugiero usar para html de la siguiente manera:

<form class="ui-grid-e">
       <input type="text" name="between1" id="between1"  />
       <input type="text" name="between2" id="between2"  />
       <input type="text" name="betweencomment" id="betweencomment"/>
</form>

Y en tu css:

.ui-grid-e{ 

display: inline;

float: left;


}
0
Sebastian 13 nov. 2017 a las 12:15