Corrección de la palabra correcta en una etiqueta de tramo

Tengo un formulario con un mensaje de validación en línea en un tramo.Corrección de la palabra correcta en una etiqueta de tramo

<span id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span>

Ugly wrap with span

Por desgracia, el ajuste de línea es muy feo. Podría poner el mensaje de validación en un div, para embellecer el mensaje. El resultado es mejor, pero no perfecto.

<div id="EndTimeErrors"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</div>

Using a div

Lo que realmente quiero es algo como esto:

Mockup of goal

¿Qué código CSS usaría para lograr el resultado deseado?

Fuente

2010-02-10 Sandra

Trate

white-space: nowrap;

Fuente

2010-02-10 15:03:24 wawooca

Gracias! Eso me dio el mismo resultado, como usar un div en lugar del lapso. Se ve mejor que el lapso, pero no es perfecto. – Sandra

La solución más elegante hasta el momento. – Chris

¡Genial para que su contenido salga volando por el borde de la pantalla! No te olvides de usar 'display: block' – JackalopeZero

La razón más probable es que se me ocurre que causa la diferencia entre sus <div> y <span> etiquetas es que un elemento <div> se considera un elemento de bloque, mientras que un elemento de <span> se considera en línea.

¿Tiene algún tipo de elemento de envoltura para los elementos flotantes, algo que se ve así?

<div class="row"> 
    <div style="float: left;"> 
     <span>Endzeit:</span> 
    </div> 
    <div style="float: left;"> 
     <input type="text" /> <span>10.2.2010</span> 
    </div> 
    <div id="EndTimeErrors"> 
     <label for="EndTime" class="field-validation-error"> 
       Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
     </label> 
    </div> 
</div>

Si no, pruébalo y creo que podría funcionar.

Fuente

2010-02-10 15:08:18 vrutberg

Usar varios divs y flotarlos funcionaría, pero quiero evitar demasiados cuadros de div. Tenía la esperanza de que hubiera un estilo CSS que me permitiera usar un lapso. El texto debe comenzar en la misma posición en la que comenzó el tramo en la primera línea y no solo al comienzo de la segunda línea. – Sandra

A veces, todo lo que necesita es un <br/>

Bitte geben Sie eine gültige Uhrzeit ein, <br/>zum Beispiel 8:00 oder 14:34

Fuente

2010-02-10 15:36:33 graphicdivine

Agregué una br y en Firefox 3.57 el inicio de las dos líneas aún no está alineado. El
controla dónde se rompe la línea, pero desafortunadamente no controla dónde comienza la nueva línea. – Sandra

Ya veo. Posiblemente, coloque display: inline-block en la etiqueta que lo contiene. – graphicdivine

Aquí está el código que terminó con:

<span id="EndTimeErrors" style="position: absolute; left: 300px;"> 
    <label for="EndTime" class="field-validation-error"> 
     Bitte geben Sie eine gültige Uhrzeit ein, zum Beispiel 8:00 oder 14:34 
    </label> 
</span>

Me coloca el lapso absolutamente y lo movió 300 px a la izquierda.

Esto funciona, pero no estoy totalmente satisfecho con esta solución, porque los 300px están codificados. Si la longitud de las cosas delante del mensaje de validación cambiara, también necesitaría cambiar los 300px.

Fuente

2010-02-10 16:01:35 Sandra

Corrección de la palabra correcta en una etiqueta de tramo

Respuesta

Cuestiones relacionadas