Forcing label to flow inline with input that they label

Question

I need the label to stay on the same line as the input field they are labeling. I want these elements to flow like they normally would when the window resizes, i just want the label to stick to the left of the input they are labeling. How would I do that? Any ideas?

<label for="id1">label1:</label>
<input type="text" id="id1"/>
<label for="id2">label2:</label>
<input type="text" id="id2"/>

ANSWERED: Josiah Ruddell's answer was on the right path, using a span instead of div gave me the correct behavior. Thanks!

<span style="white-space:nowrap">
    <label for="id1">label1:</label>
    <input type="text" id="id1"/>
</span>
<span style="white-space:nowrap">
    <label for="id2">label2:</label>
    <input type="text" id="id2"/>
</span>

score 61 · Accepted Answer · answered Nov 17 '10 at 21:07

61

put them both inside a div with nowrap.

<div style="white-space:nowrap">
    <label for="id1">label1:</label>
    <input type="text" id="id1"/>
</div>

answered Nov 17 '10 at 21:07

Josiah Ruddell

29,697
8
65
67

1

This doesn't work when I tried it. It made it not wrap at all... I still want it to wrap when the window is big enough. – user366735 Nov 17 '10 at 22:03
2

Oh, but this method would work with a SPAN! So what I'm actually looking for is this: label1: label2: – user366735 Nov 17 '10 at 22:06
This answer is correct, but also check @Omar's answer which is without an extra div: https://stackoverflow.com/a/25416650/9868445. I like that answer more because labels are inline and so you don't lose the ability to put two or more inputs on the same line. – aderchox Feb 06 '22 at 10:16
input most not have display:block set for it to work – Nathan Rona Mar 15 '22 at 12:51
Doesn't work... – Jurass Mar 11 '23 at 16:12

score 12 · Answer 2 · answered Nov 17 '10 at 21:19

12

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>

answered Nov 17 '10 at 21:19

zzzzBov

174,988
54
320
367

7

@Sebastian I disagree wholeheartedly, whoops wasn't done with my comment: the w3c spec specifies the interaction for when an input element is within a label. I assume that's because it's *intended*. "To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control." http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9.1 – zzzzBov Nov 17 '10 at 21:23
This doesn't work when I tried it. Putting the input inside the label tag doesn't force them to wrap together. – user366735 Nov 17 '10 at 22:04
2

@user366735 if you could provide a live example you can get a better answer. – zzzzBov Nov 17 '10 at 22:07
Input should never be inside label- It is called label for something- out of all solutions possible, this is the wrong one. This is now how we want to code. – Albuquerque Web Design Jan 13 '21 at 20:23
4

@AlbuquerqueWebDesign, I disagree, and so does the HTML specification, ["The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, **or by putting the form control inside the label element itself**."](https://html.spec.whatwg.org/multipage/forms.html#the-label-element) emphasis mine. – zzzzBov Jan 14 '21 at 04:50
Although this answer is very old, but here's an example that shows it doesn't work: https://codesandbox.io/s/strange-beaver-2ixkn?file=/index.html – aderchox Feb 06 '22 at 10:08

score 1 · Answer 3 · edited Feb 28 '15 at 09:08

1

<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

edited Feb 28 '15 at 09:08

Jake Smith

2,332
1
30
68

answered Aug 21 '14 at 00:44

Omar

11,783
21
84
114

score 1 · Answer 4 · answered Apr 12 '16 at 01:30

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>

score 1 · Answer 5 · answered Sep 26 '19 at 11:31

1

What I did so that input didn't take up the whole line, and be able to place the input in a paragraph, I used a span tag and display to inline-block

html:

<span>cluster:
        <input class="short-input" type="text" name="cluster">
</span>

css:

span{display: inline-block;}

answered Sep 26 '19 at 11:31

Gary DuMond

11
1

you can put some snap so that we can understand what you want to achieve. – Vikas Rinvi Sep 26 '19 at 11:42

score 0 · Answer 6 · answered Apr 16 '14 at 17:01

If you want they to be paragraph, then use it.

<p><label for="id1">label1:</label> <input type="text" id="id1"/></p>
<p><label for="id2">label2:</label> <input type="text" id="id2"/></p>

Both <label> and <input> are paragraph and flow content so you can insert as paragraph elements and as block elements.

score -2 · Answer 7 · edited Nov 07 '17 at 17:33

-2

Why don't You just use:

label {
    display: block;
    width: 50px;
    height: 24px;
    float: left;
}

edited Nov 07 '17 at 17:33

thecoolmacdude

2,036
1
23
38

answered Apr 21 '11 at 10:50

cachaito

343
1
6
19

6

jsFiddle says: Error 404 We're truly sorry, but there is no such page. – Per Quested Aronsson Oct 23 '12 at 19:12

Forcing label to flow inline with input that they label

7 Answers7

Linked