Forcing label to flow inline with input that they label

问题

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>

回答1:

put them both inside a div with nowrap.

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

回答2:

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>

回答3:

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>

回答4:

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.

回答5:

<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

回答6:

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

回答7:

Why don't You just use:

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

来源：https://stackoverflow.com/questions/4209154/forcing-label-to-flow-inline-with-input-that-they-label

标签

css

input

label