Forcing label to flow inline with input that they label
put them both inside a div
with nowrap.
<div style="white-space:nowrap">
<label for="id1">label1:</label>
<input type="text" id="id1"/>
</div>
http://jsfiddle.net/jwB2Y/123/
The following CSS class force the label text to flow inline and get clipped if its length is more than max-length of the label.
.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>
<style>
.nowrap {
white-space: nowrap;
}
</style>
...
<label for="id1" class="nowrap">label1:
<input type="text" id="id1"/>
</label>
Wrap your inputs within the label tag
Put the input
in the label, and ditch the for
attribute
<label>
label1:
<input type="text" id="id1" name="whatever" />
</label>
But of course, what if you want to style the text? Just use a span
.
<label id="id1">
<span>label1:</span>
<input type="text" name="whatever" />
</label>