¿Cómo puedo poner un elemento de entrada en la misma línea que su etiqueta?

Question

Me gustaría poner un label y un input[type=text] en la misma línea, y me gustaría que el ancho de input llene el ancho restante del elemento contenedor, independientemente de la longitud del texto de la etiqueta (vea la primera imagen) .

He intentado utilizar width: auto; para el input, pero parece tener un ancho estático. También probé width: 100%;, pero eso mueve el input a una nueva línea (ver la segunda imagen).

¿Cómo puedo lograr esto usando CSS?

Answer 1

Es posible sin JavaScript, consulte: http://jsfiddle.net/Khmhk/

Esto funciona en IE7 + y todos los navegadores modernos.

HTML:

<label for="test">Label</label> 
<span><input name="test" id="test" type="text" /></span> 

CSS:

label { 
    float: left 
} 
span { 
    display: block; 
    overflow: hidden; 
    padding: 0 4px 0 6px 
} 
input { 
    width: 100% 
} 

La razón por la cual es tan overflow: hiddenmágicamente útil en este caso es explained here.

---

display: table-cell es otra opción, consulte: http://jsfiddle.net/Khmhk/1/

Este works in IE8+ y todos los navegadores modernos:

HTML:

<div class="container"> 
    <label for="test">Label</label> 
    <span><input name="test" id="test" type="text" /></span> 
</div> 

CSS:

.container { 
    display: table; 
    width: 100% 
} 
label { 
    display: table-cell; 
    width: 1px; 
    white-space: nowrap 
} 
span { 
    display: table-cell; 
    padding: 0 0 0 5px 
} 
input { 
    width: 100% 
} 

Answer 2

Eso todavía funciona para mí, pero así es como lo hace Bootstrap 3 (gracias a @morten.c's answer to "Bootstrap full-width text-input within inline-form"). No sé si es más difícil de romper que @ thirtydot, o algo así. Pero aquí está, y here's a fiddle que también da un ejemplo básico de cómo lidiar con un punto de ruptura de pantalla estrecha.

HTML:

<form class="responsive"> 
    <input type="text" placeholder="wide input..."/> 
    <span> 
     <input type="submit"/> 
    </span> 
</form> 

CSS:

form.responsive, form.responsive * { 
    box-sizing: border-box; 
    width: 100%; 
    height: 40px !important; /* specify a height */ 
} 
form.responsive { 
    position: relative; 
    display: table; 
    border-collapse: separate; 

    /* just to be safe */ 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 
form.responsive > input { 
    position: relative; 
    width: 100%; 
    float:left; 
    margin-bottom: 0; 
    display: table-cell; 
} 
form.responsive span { 
    position: relative; 
    width: 1%; 
    vertical-align: middle; 
    display: table-cell; 
} 
form.responsive span input { 
    margin: 0; 
    margin-left: -1px; 
    display: inline-block; 
    vertical-align: middle; 
    overflow: visible; 
}