Este dilema se puede solucionar de variadas maneras, sin embargo te damos la que en nuestra opinión es la resolución más completa.
Solución:
Suponiendo que desee hacer flotar los elementos, también tendría que hacer flotar el label elementos también.
Algo como esto funcionaría:
label
/* Other styling... */
text-align: right;
clear: both;
float:left;
margin-right:15px;
#form
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
label
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
clear: both;
float:left;
margin-right:15px;
input
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
float: left;
input[type=button]
float:none;
Alternativamente, un enfoque más común sería envolver el input/label elementos en grupos:
#form
background-color: #FFF;
height: 600px;
width: 600px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 0px;
text-align:center;
label
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
margin-right:15px;
float:left;
input
height: 20px;
width: 300px;
border: 1px solid #000;
margin-top: 10px;
Tenga en cuenta que el for attribute debe corresponder a la id de un elemento etiquetable, no su name. Esto permitirá a los usuarios hacer clic en el label para dar foco al elemento de formulario correspondiente.
encontré "display:flex" El estilo es una buena forma de hacer que estos elementos estén en la misma línea. No importa qué tipo de elemento en el div. Especialmente si la clase de entrada es control de formulario, otras soluciones como bootstrap, inline-block no funcionarán bien.
Ejemplo:
Más detalles sobre la pantalla: flex:
dirección flexible: fila, columna
justificar-contenido: flex-end, center, space-between, space-around
alinear-elementos: estirar, flex-start, flex-end, center
aaa ## HTML Le sugiero que los envuelva en un div, ya que probablemente terminará flotando en ciertos contextos.
CSS
Luego, dentro de ese div, puedes hacer cada pieza inline-block para que puedas usar vertical-align para centrarlos, o establecer una línea de base, etc. (sus etiquetas y datos de entrada pueden cambiar de tamaño en el futuro …
.input-w label, .input-w input
float: none; /* if you had floats before? otherwise inline-block will behave differently */
display: inline-block;
vertical-align: middle;
jsFiddle
ACTUALIZACIÓN: mediados de 2016 + con consultas de medios móviles primero y flex-box
Así es como hago las cosas estos días.
HTML
SCSS
html // https://www.paulirish.com/2012/box-sizing-border-box-ftw/
box-sizing: border-box;
*, *:before, *:after
box-sizing: inherit;
// if you don't already reset your box-model, read about it
.input-w
display: block;
width: 100%; // should be contained by a form or something
margin-bottom: 1rem;
@media (min-width: 500px)
display: flex;
flex-direction: row;
align-items: center;
.label, .input
display: block;
width: 100%;
border: 1px solid rgba(0,0,0,.1);
@media (min-width: 500px)
width: auto;
display: flex;
.label
font-size: 13px;
@media (min-width: 500px)
/* margin-right: 1rem; */
min-width: 100px; // maybe to match many?
.input
padding: .5rem;
font-size: 16px;
@media (min-width: 500px)
flex-grow: 1;
max-width: 450px; // arbitrary
jsFiddle