Corrispondenza parola corretta in un tag span

Ho un modulo con un messaggio di convalida in linea in un intervallo.Corrispondenza parola corretta in un tag span

<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

Purtroppo il ritorno a capo automatico è davvero brutto. Potrei inserire il messaggio di convalida in un div, per abbellire il messaggio. Il risultato è migliore, ma non perfetto.

<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

Quello che voglio davvero è qualcosa di simile:

Mockup of goal

Quale codice CSS usereste per ottenere il risultato desiderato?

fonte

2010-02-10 Sandra

Prova

white-space: nowrap;

fonte

2010-02-10 15:03:24 wawooca

Grazie! Questo mi ha dato lo stesso risultato come usare un div al posto dello span. Sembra migliore dello span, ma non perfetto. – Sandra

La soluzione più elegante finora. – Chris

Ottimo per far volare i tuoi contenuti fuori dal bordo dello schermo! Non dimenticarti di usare 'display: block' – JackalopeZero

La ragione più probabile che posso pensare di causare la differenza tra le <div> e <span> tag è che un elemento <div> è considerato un elemento di blocco, mentre un elemento <span> è considerato in linea.

Avete qualche tipo di elemento di avvolgimento per gli elementi flottati, qualcosa che assomiglia a questo?

<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>

In caso contrario, provare e penso che potrebbe funzionare.

fonte

2010-02-10 15:08:18 vrutberg

Usando diverse div e facendole fluttuare funzionerebbero, ma voglio evitare troppe caselle div. Speravo che ci sarebbe stato uno stile css che mi avrebbe permesso di usare uno span. Il testo dovrebbe iniziare nella stessa posizione in cui lo span inizia nella prima riga e non solo all'inizio della seconda riga. – Sandra

volte, tutto ciò che serve è un <br/>

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

fonte

2010-02-10 15:36:33 graphicdivine

Ho aggiunto un br e in Firefox 3.57 l'inizio delle due linee non è ancora allineato. Il
controlla dove si interrompe la linea, ma sfortunatamente non controlla dove inizia la nuova linea. – Sandra

Capisco. Posible, mettere display: inline-block sull'etichetta contenente. – graphicdivine

ecco il codice ho finito 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>

ho posizionato la durata assolutamente e si è trasferito 300px a sinistra.

Questo funziona, ma non sono completamente soddisfatto di questa soluzione, perché i 300 px sono codificati. Se la lunghezza di cose di fronte al messaggio di convalida cambierebbe, avrei anche bisogno di cambiare il 300px.

fonte

2010-02-10 16:01:35 Sandra

Corrispondenza parola corretta in un tag span

risposta

Problemi correlati