19

HTML にはいくつかの要素があり、それらをラップするときにグループ化したままにします。答えは CSS (または JavaScript) にあると思いますが、よくわかりません。たとえば、次のようにレイアウトされたいくつかの要素があります。

<label A><input A><label B><input B><label C><input C>

ユーザーがブラウザー ウィンドウのサイズを変更することがあり、最終的には次のようになります。

<label A><input A><label B>
<input B><label C><input C>

上記の例では、入力 B はその入力要素の隣にありません。ラベルと入力をグループ化してラップする方法はありますか? 私はdivを試し、要素を「nowrap」でテーブルにまとめましたが、結果はまちまちでした。行の折り返しは気にしません。ラベルと入力要素を一緒に保つ必要があるだけです。

4

6 に答える 6

17

次のようなことを試してください：

<label>First Name:
    <input type="text">
</label>
<label>Last Name:
    <input type="text">
</label>

そしてセット

label {
    display: inline-block;
}

デモhttp://dabblet.com/gist/3145028

代替手段: と の両方<label>をwith<input>でラップする<div>display: inline-block

于 2012-07-19T16:17:10.343 に答える
8

簡単な答えは、スタイルとしてインラインブロックというディスプレイを持つ別の要素に要素をラップすることです。そう...

<span class='wrapper'>
  <span class='left-side'></span>
  <span class='right-side'></span>
</span>

と

.wrapper {
  display: inline-block;
}
于 2015-04-25T15:39:46.070 に答える
6

これらすべての要素を次のように div に入れます。

<div style="white-space: nowrap">
  ...
</div>
于 2012-07-19T16:17:25.087 に答える
6

一緒に保持したい各ペアの周りに親divを設定することも検討する価値があるかもしれません-これを試したと言っていましたが、固定幅とdisplay:inline; そしてそれはうまくいくはずです

ALSOO include float:left/right;(1 つだけ選択) この方法では、ブラウザー ウィンドウが小さすぎてすべてを並べて表示できない場合、代わりに最後のペアを取得して次の行にドロップしますが、すべての要素を保持する必要があります。一緒に、そして並んで。

于 2012-07-19T16:17:57.073 に答える
0

これは表にあると言ったので、おそらく探していたものは次のとおりです。http://jsfiddle.net/DX9G7/

HTML:

<table border="0" cellspacing="0" cellpadding="0">
    <colgroup>
        <col width="30%" />
        <col width="30%" />
        <col width="40%" />
    </colgroup>
    <tr>
        <td>
            <div class="form-row">
                <label>A</label>
                <input type="text" />
            </div>
            <div class="form-row">
                <label>B</label>
                <input type="text" />
            </div>
            <div class="form-row">
                <label>C</label>
                <input type="text" />
            </div>
        </td>
    </tr>
</table>​

これで、css を好きなように変更できます。

于 2012-07-19T16:17:49.767 に答える
0

各ラベル/入力グループを a に配置して<span>から、css を に設定できdisplay:inlineます。これにより、グループ化が維持されると確信しています。サイトのレイアウトと以前の CSS によっては、span css を微調整する必要がある場合があります。

于 2012-07-19T16:15:25.363 に答える