web-dev-qa-db-ja.com

ラベルを付ける入力でラベルをインラインに強制

ラベルを付ける入力フィールドと同じ行にラベルを保持する必要があります。これらの要素は、ウィンドウのサイズが変更されたときに通常どおり流れるようにし、ラベルを付ける入力の左側にラベルを貼り付けたいだけです。どうすればいいですか？何か案は？

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

回答：ジョサイア・ラデルの答えは正しい道を進んでおり、divの代わりにspanを使用することで正しい動作が得られました。ありがとう！

<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>
cssinputlabel
34
user366735

両方をnowrapでdiv内に配置します。

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

ラベルに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>
7
zzzzBov

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>
1
Razan Paul
<style>
.nowrap {
    white-space: nowrap;
}
</style>

...

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

入力をラベルタグ内にラップする

0
Omar

段落にする場合は、それを使用します。

<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>は段落およびフローコンテンツであるため、段落要素およびブロック要素として挿入できます。

0
PhoneixS