CSS 强制标签与他们标记的输入内联流动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4209154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Forcing label to flow inline with input that they label
提问by user366735
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!
回答：Josiah Ruddell 的答案是正确的，使用 span 而不是 div 给了我正确的行为。谢谢！
<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>
回答by Josiah Ruddell
put them both inside a divwith nowrap.
把它们都放在一个divnowrap里面。
<div style="white-space:nowrap">
<label for="id1">label1:</label>
<input type="text" id="id1"/>
</div>
回答by zzzzBov
Put the inputin the label, and ditch the forattribute
将 放入input标签中，并丢弃该for属性
<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.
但是，当然，如果您想设置文本样式怎么办？只需使用一个span.
<label id="id1">
<span>label1:</span>
<input type="text" name="whatever" />
</label>
回答by Razan Paul
http://jsfiddle.net/jwB2Y/123/
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.
以下 CSS 类强制标签文本内联流动并在其长度超过标签的 max-length 时被剪裁。
.inline-label {
white-space: nowrap;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
float:left;
}
HTML:
HTML：
<div>
<label for="id1" class="inline-label">This is the dummy text i want to display::</label>
<input type="text" id="id1"/>
</div>
回答by Gary DuMond
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:
html：
<span>cluster:
<input class="short-input" type="text" name="cluster">
</span>
css:
css：
span{display: inline-block;}
回答by PhoneixS
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.
这两个<label>和<input>是段落和流量内容，因此您可以为段落元素和块元素插入。
回答by Omar
<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
将您的输入包裹在标签标签中
回答by cachaito
Why don't You just use:
你为什么不使用：
label {
display: block;
width: 50px;
height: 24px;
float: left;
}
