Forzando la etiqueta para que fluya en línea con la entrada que etiquetan

Necesito que la etiqueta permanezca en la misma línea que el campo de entrada que están etiquetando. Quiero que estos elementos fluyan como lo harían normalmente cuando la ventana cambia de tamaño, solo quiero que la etiqueta se adhiera a la izquierda de la entrada que etiquetan. ¿Como podría hacerlo? ¿Algunas ideas?Forzando la etiqueta para que fluya en línea con la entrada que etiquetan

<label for="id1">label1:</label> 
<input type="text" id="id1"/> 
<label for="id2">label2:</label> 
<input type="text" id="id2"/>

con respuesta: la respuesta de Josías Ruddell estaba en el camino correcto, el uso de un lapso en lugar de div me dio el comportamiento correcto. ¡Gracias!

<span style="white-space:nowrap"> 
    <label for="id1">label1:</label> 
    <input type="text" id="id1"/> 
</span> 
<span style="white-space:nowrap"> 
    <label for="id2">label2:</label> 
    <input type="text" id="id2"/> 
</span>

Fuente

2010-11-17 user366735

ponlos ambos dentro de un div con nowrap.

<div style="white-space:nowrap"> 
    <label for="id1">label1:</label> 
    <input type="text" id="id1"/> 
</div>

Fuente

2010-11-17 21:07:27

Esto no funciona cuando lo probé. No lo envolvió en absoluto ... Todavía quiero que se envuelva cuando la ventana es lo suficientemente grande. – user366735

¡Oh, pero este método funcionaría con un SPAN! Así que lo que realmente estoy buscando es la siguiente: \t label1: \t estilo \t label2: \t – user366735

dosis no funciona para mí! –

Coloque el input en la etiqueta, y una zanja el atributo for

<label> 
    label1: 
    <input type="text" id="id1" name="whatever" /> 
</label>

Pero, por supuesto, lo que si se quiere aplicar estilo al texto? Solo use un span.

<label id="id1"> 
    <span>label1:</span> 
    <input type="text" name="whatever" /> 
</label>

Fuente

2010-11-17 21:19:12 zzzzBov

esto funciona visualmente, pero no es semántico. –

@Sebastian No estoy de acuerdo sinceramente, whoops no terminó con mi comentario: la especificación w3c especifica la interacción para cuando un elemento de entrada está dentro de una etiqueta. Supongo que es porque es * intencionado *. "Para asociar una etiqueta con otro control implícitamente, el elemento de control debe estar dentro del contenido del elemento LABEL.En este caso, la ETIQUETA solo puede contener un elemento de control. La etiqueta en sí misma puede colocarse antes o después del control asociado. "Http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9.1 – zzzzBov

Esto no funciona cuando lo intenté Poner la entrada dentro de la etiqueta de etiqueta no los obliga a envolver juntos. – user366735

-2

¿Por qué no sólo tiene que utilizar:

label { 
    display: block; 
    width: 50px; 
    height: 24px; 
    float: left; 
}

Fuente

2011-04-21 10:50:46 cachaito

jsFiddle dice: Error 404 Lo sentimos mucho, pero hay no hay tal página. –

Si desea que sean párrafo, a continuación, utilizarlo.

<p><label for="id1">label1:</label> <input type="text" id="id1"/></p> 
<p><label for="id2">label2:</label> <input type="text" id="id2"/></p>

Tanto <label> y <input> son el párrafo y el flujo de contenido para que pueda insertar como elementos de párrafo y como elementos de bloque.

Fuente

2014-04-16 17:01:29 PhoneixS

<style> 
.nowrap { 
    white-space: nowrap; 
} 
</style> 

... 

<label for="id1" class="nowrap">label1: 
    <input type="text" id="id1"/> 
</label>

envolver su entrada dentro de la etiqueta etiqueta

Fuente

2014-08-21 00:44:50 Omar

http://jsfiddle.net/jwB2Y/123/

La siguiente fuerza de clase CSS del texto de la etiqueta de flujo en línea y obtener recortado si su longitud es de más de un máximo de longitud de la etiqueta.

.inline-label { 
    white-space: nowrap; 
    max-width: 150px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    float:left;  
    }

HTML:

<div> 
    <label for="id1" class="inline-label">This is the dummy text i want to display::</label> 
    <input type="text" id="id1"/> 
</div>

Fuente

2016-04-12 01:30:47

Forzando la etiqueta para que fluya en línea con la entrada que etiquetan

Respuesta

Cuestiones relacionadas