强制标签与它们标记的输入内联流动

Question

我需要标签与它们标记的输入字段保持在同一行。我希望这些元素在窗口大小调整时像平常一样流动，我只想将标签粘贴到它们正在标记的输入的左侧。我该怎么做呢？有什么想法吗？

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

回答：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>

Answer 1

使用 nowrap 将它们都放在 div 中。

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

Answer 2

将 input 放在标签中，并放弃 for 属性

<label>
  label1:
  <input type="text" id="id1" name="whatever" />
</label>

但是，当然，如果您想设置文本样式怎么办？只需使用span。

<label id="id1">
  <span>label1:</span>
  <input type="text" name="whatever" />
</label>

Answer 3

<style>
.nowrap {
    white-space: nowrap;
}
</style>

...

<label for="id1" class="nowrap">label1:
    <input type="text" id="id1"/>
</label>

将您的输入包裹在 label 标签内

Answer 4

http://jsfiddle.net/jwB2Y/123/

以下 CSS 类强制标签文本流动内联并在其长度超过标签的最大长度时被剪裁。

.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>

Answer 5

我所做的就是让输入不占用整行，并且能够将输入放在一个段落中，我使用了一个 span 标签并显示为 inline-block

html:

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

css:

span{display: inline-block;}

Answer 6

如果您希望它们成为段落，请使用它。

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

和 都是段落和流内容，因此您可以作为段落元素和块元素插入。

Answer 7

你为什么不直接使用：

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