Question

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

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

答案：Josiah Ruddell的回答是在正确的道路上，使用跨度而不是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

如果你想让它们成为段落，那么就使用它。

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

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

...

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

将输入包裹在标签标签

中

Answer 5

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 6

我这样做是为了使输入不占用整行，并且能够将输入放置在一个段落中，我使用了span标记并显示来内联

html：

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

css：

span{display: inline-block;}

Answer 7

为什么不使用：

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

强制标签与其标记的输入内联

7 个答案: