0
211
Vistas¿Cómo alinear dos clases de entrada en la misma línea?
Quiero alinear dos clases de entrada una al lado de la otra con algo de espacio entre ellas como en la siguiente imagen. 
Sin embargo, mi salida actual es así: 
el codigo html es
<div class="form-group"> <div class="row"> <label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label> <div id="box" class="col-sm-8 col-xs-8"> <input type="text" class="form-control" name="workphoneNumber" placeholder="enter"> <input type="button" class="btn btn-success" value="add" onclick="add_textbox()"> </div> </div> </div>
·
Santiago Trujillo
3 Respuestas
Responde la pregunta0
Solo agregue ancho y margen
style="margin-right:5px;width:80%;float:left" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <div class="form-group"> <div class="row"> <label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label> <div id="box" class="col-sm-8 col-xs-8"> <input style="margin-right:5px;width:80%;float:left" type="text" class="form-control" name="workphoneNumber" placeholder="enter"> <input style="width:15%;float:left" type="button" class="btn btn-success" value="add" onclick="add_textbox()"> </div> </div> </div>
·
Santiago Trujillo
Denunciar
0
También puede usar display: inline-block en lugar de float .
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <div class="form-group"> <div class="row"> <label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label> <div id="box" class="col-sm-8 col-xs-8"> <input style="margin-right:5px;width:80%;display:inline-block;vertical-align:top" type="text" class="form-control" name="workphoneNumber" placeholder="enter"> <input style="width:15%;display:inline-block" type="button" class="btn btn-success" value="add" onclick="add_textbox()"> </div> </div> </div>
·
Santiago Trujillo
Denunciar
0
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <div class="form-group"> <div class="row"> <label for="form-workphoneNumber" class="col-sm-4 col-xs-4 control-label">input</label> <div id="box" class="col-sm-8 col-xs-8 d-flex"> <input type="text" class="form-control m-2" name="workphoneNumber" placeholder="enter"> <input type="button" class="btn btn-success m-2" value="add" onclick="add_textbox()"> </div> </div> </div>Le sugiero que use estilos en línea avloid y use clases de arranque para buenas prácticas
·
Santiago Trujillo
Denunciar
Responde la pregunta