Alinear span y textbox

publicado por: Anonymous

Tengo el siguiente formulario para realizar login pero no se alinean.

introducir la descripción de la imagen aquí

No consigo que el span de usuario y el de password estén en la misma línea, es decir, que no haya un salto entre el span y el input.

Estoy usando bootstrap 4.

_x000D_

_x000D_

/* LOGIN */_x000D_
.login {_x000D_
background: #D8D8D8;_x000D_
border-radius: 25px;_x000D_
padding: 25px;_x000D_
margin-top: 25px;_x000D_
display: inline-block;_x000D_
}_x000D_
_x000D_
.btn-acceder {_x000D_
margin-top: 15px;_x000D_
}_x000D_
_x000D_
.icon-left {_x000D_
float: left;_x000D_
margin-top: 2.5px;_x000D_
margin-right: 5px;_x000D_
}_x000D_
_x000D_
.form-right {_x000D_
float: right;_x000D_
}_x000D_
_x000D_
.checkbox-align {_x000D_
text-align: right;_x000D_
color: red;_x000D_
float: left;_x000D_
}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">_x000D_
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">_x000D_
<div class="container">_x000D_
<div class="login">_x000D_
    <form class="form-signin" method="post">_x000D_
    <h2 class="form-signin-heading">Inicio Sesion</h2>_x000D_
    <div class="col-lg-10" role="form">_x000D_
        <span class="fa fa-user icon-left col-lg-2 control-label"></span>_x000D_
        <input type="text" id="userlogin" name="userlogin" class="form-control form-right" placeholder="Usuario" required autofocus>_x000D_
    </div><br><br>_x000D_
    <div class="col-lg-10" role="form">_x000D_
        <span class="fa fa-unlock-alt icon-left col-lg-2 control-label" aria-hidden="true"></span>_x000D_
        <input type="password" id="passlogin" name="passlogin" class="form-control form-right" placeholder="Contraseña" required>_x000D_
    </div>_x000D_
    <div class="checkbox"><br>_x000D_
        <label>_x000D_
        <input type="checkbox" value="remember-me"> Recordarme_x000D_
        </label>_x000D_
    </div>_x000D_
    <button class="btn btn-lg btn-primary btn-block" type="submit">Acceder</button>_x000D_
    </form>_x000D_
</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

He intentado mediante float que el span y el input esten a izquierda y derecha pero no consigo que se alineen y por último con display: inline-block;

Y lo otro es que no consigo que la caja del login se ponga en el centro, he probado con center-block pero tampoco se va al centro.

¿Qué estoy haciendo mal?

solución

El problema es que tienes los span fuera de los divs, tan solo muevelos dentro, tambien puedes aplicar margins a la clase .icon-left para ajustarlos. Te dejo un ejemplo con el codigo que has pasado:

_x000D_

_x000D_

/* LOGIN */_x000D_
.login {_x000D_
background: #D8D8D8;_x000D_
border-radius: 25px;_x000D_
padding: 25px;_x000D_
margin-top: 25px;_x000D_
display: inline-block;_x000D_
}_x000D_
.btn-acceder {_x000D_
margin-top: 15px;_x000D_
}_x000D_
.col-lg-10{_x000D_
  padding-left: 0 !important;_x000D_
  display: inline;_x000D_
  padding: 0;_x000D_
}_x000D_
.fa{_x000D_
  width: auto !important;_x000D_
}_x000D_
.icon-left {_x000D_
margin-top: 10px;_x000D_
}_x000D_
_x000D_
.form-right {_x000D_
float: right;_x000D_
}_x000D_
.form-control{_x000D_
  width: auto !important;_x000D_
}_x000D_
.checkbox-align {_x000D_
text-align: right;_x000D_
color: red;_x000D_
float: left;_x000D_
}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">_x000D_
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">_x000D_
_x000D_
<div class="container">_x000D_
<div class="login">_x000D_
    <form class="form-signin" method="post">_x000D_
    <h2 class="form-signin-heading">Inicio Sesion</h2>_x000D_
    <div class="col-lg-10" role="form">_x000D_
        <span class="fa fa-user icon-left col-lg-2 control-label"></span>_x000D_
        <input type="text" id="userlogin" name="userlogin" class="form-control form-right" placeholder="Usuario" required autofocus>_x000D_
    </div><br>_x000D_
    <div class="col-lg-10" role="form"><br>_x000D_
        <span class="fa fa-unlock-alt icon-left col-lg-2 control-label" aria-hidden="true"></span>_x000D_
        <input type="password" id="passlogin" name="passlogin" class="form-control form-right" placeholder="Contraseña" required>_x000D_
    </div>_x000D_
    <div class="checkbox"><br>_x000D_
        <label>_x000D_
        <input type="checkbox" value="remember-me"> Recordarme_x000D_
        </label>_x000D_
    </div>_x000D_
    <button class="btn btn-lg btn-primary btn-block" type="submit">Acceder</button>_x000D_
    </form>_x000D_
</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *