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

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

将它们都放在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

你为什么不直接使用：

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

Answer 4

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

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

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

Answer 5

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

...

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

将您的输入包装在标签标签中

Answer 6

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 7

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

html:

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

css：

span{display: inline-block;}