Prawidłowe zawijanie wyrazów w znaczniku zakresu

Mam formularz z wbudowaną wiadomością sprawdzania poprawności w zakresie.Prawidłowe zawijanie wyrazów w znaczniku zakresu

<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

Niestety okład słowo jest naprawdę brzydka. Mogę umieścić komunikat sprawdzania poprawności w div, aby upiększyć wiadomość. Wynik jest lepszy, ale nie doskonały.

<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

Co ja naprawdę chcę to coś takiego:

Mockup of goal

Co CSS kod należałoby użyć, aby osiągnąć pożądany rezultat?

Źródło

2010-02-10 Sandra

Spróbuj

white-space: nowrap;

Źródło

2010-02-10 15:03:24 wawooca

Dzięki! To dało mi taki sam wynik, jak użycie div zamiast span. Wygląda lepiej niż rozpiętość, ale nie jest doskonała. – Sandra

Najbardziej eleganckie rozwiązanie do tej pory. – Chris

Doskonały do tego, aby Twoje treści znalazły się poza ekranem! Nie zapomnij użyć 'display: block' – JackalopeZero

Najbardziej prawdopodobnym powodem mogę myśleć powodując różnicę między swoimi <div> i <span> tagów jest to, że element <div> jest uważana za element bloku, podczas gdy element <span> jest uważany inline.

Masz jakiś element do owijania elementów pływających, coś, co wygląda tak?

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

Jeśli nie, spróbuj i myślę, że może działać.

Źródło

2010-02-10 15:08:18 vrutberg

Używanie kilku elementów div i unoszenie ich będzie działać, ale chcę uniknąć zbyt wielu pól div. Miałem nadzieję, że będzie styl css, który umożliwi mi użycie rozpiętości. Tekst powinien rozpoczynać się w tej samej pozycji, w której rozpiętość rozpoczyna się w pierwszej linii, a nie tylko na początku drugiej linii. – Sandra

Czasami wszystko, czego potrzebujesz to <br/>

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

Źródło

2010-02-10 15:36:33 graphicdivine

Dodałem br iw Firefoksie 3.57 początek dwóch linii nadal nie jest wyrównany. Obiekt
steruje przerwaniem linii, ale niestety nie kontroluje miejsca rozpoczęcia nowej linii. – Sandra

Rozumiem. Co ważne, umieść wyświetlacz: wbudowany blok na etykiecie zawierającej. – graphicdivine

Oto kod I skończył z:

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

I umieszczony rozpiętość absolutnie i przeniósł go 300px w lewo.

To działa, ale nie jestem w pełni zadowolony z tego rozwiązania, ponieważ 300px jest zakodowane na stałe. Gdyby długość materiału przed komunikatem o walidacji uległa zmianie, musiałabym zmienić także 300px.

Źródło

2010-02-10 16:01:35 Sandra

Prawidłowe zawijanie wyrazów w znaczniku zakresu

Odpowiedz

Powiązane problemy