I've a form with an inline validation message in a 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>
Unfortunately the word wrap is really ugly. I could put the validation message in a div, to beautify the message. The result is better, but not perfect.
<div id="EndTimeErrors">
<label for="EndTime" class="field-validation-error">
Bitte geben Sie eine gültige Uhr开发者_JAVA百科zeit ein, zum Beispiel 8:00 oder 14:34
</label>
</div>
What I really want is something like this:
What CSS code would you use to achieve the desired result?
Try
white-space: nowrap;
Here is the code I ended up with:
<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 positioned the span absolutely and moved it 300px to the left.
This works, but I'm not totally satisfied with this solution, because the 300px are hard-coded. If the length of stuff in front of the validation message would change, I would also need to change the 300px.
The most likely reason I can think of causing the difference between your <div>
and <span>
tags is that a <div>
element is considered a block element, while a <span>
element is considered inline.
Do you have some kind of wrapping element for the floated elements, something that looks like this?
<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>
If not, try it and I think it might work.
Sometimes, all you need is a <br/>
Bitte geben Sie eine gültige Uhrzeit ein, <br/>zum Beispiel 8:00 oder 14:34
精彩评论