41

HTMLコードスニペット：

<fieldset id="o-bs-sum-buginfo">
  <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
  <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />

  <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
  <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  ....
</fieldset>

ブラウザのサイズに関係なく、CSS（またはjquery）のみを使用して、ラベル要素と入力要素を並べてペアにします。HTMLの微調整を変更する自由もあります。もし必要なら。

4

6 に答える 6

86

これは、正しく理解するのが驚くほど難しいものの 1 つです。

多くの人がこれを使用することを提案しfloat:left;ます。個人的には、フロートが大嫌いです。それらは解決するよりも多くの問題を引き起こすようです。

私の好みは、インラインブロックを使用することです。これは、インライン プロパティ (要素を簡単に並べて配置できるなど) とブロック プロパティ (寸法を指定できるなど) を組み合わせた表示方法です。

したがって、答えは単に両方を作成しdisplay:inline-block;、プロンプトに固定幅を与えることです。これにより、それらの隣の入力フィールドが整列します。

また、入力フィールドの後にある種の改行または改行が必要です。そうしないと、次のプロンプトが同じ行に表示され、望ましい効果が得られません。これを実現する最善の方法は、各プロンプトとそのフィールドをコンテナに入れること<div>です。

したがって、HTML は次のようになります。

<fieldset id="o-bs-sum-buginfo" class="myfields">
  <div>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
  </div>

  <div>
    <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
    <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  </div>
  ....
</fieldset>

CSS は次のようになります。

.myfields label, .myfields input {
  display:inline-block;
}

.myfields label {
  width:200px; /* or whatever size you want them */
}

それが役立つことを願っています。

編集: このプラグインを使用して、各ラベルの幅を設定できます。

jQuery.fn.autoWidth = function(options) 
{ 
  var settings = { 
        limitWidth   : false 
  } 

  if(options) { 
        jQuery.extend(settings, options); 
    }; 

    var maxWidth = 0; 

  this.each(function(){ 
        if ($(this).width() > maxWidth){ 
          if(settings.limitWidth && maxWidth >= settings.limitWidth) { 
            maxWidth = settings.limitWidth; 
          } else { 
            maxWidth = $(this).width(); 
          } 
        } 
  });   

  this.width(maxWidth); 
}

このページのコメントから

次のように使用します。

$("div.myfields div label").autoWidth();

それだけです...すべてのラベルは、最も長いラベルの幅になります

于 2011-01-09T19:54:40.660 に答える
10

#o-bs-sum-buginfo label, #o-bs-sum-buginfo input{display:inline-block;width:50%;}

于 2011-01-09T19:53:28.627 に答える
1

There's no need to use JavaScript, jQuery, or additional divs. You just have to:

  • Float both input and label to left (note that input has to be block to be floated).
  • Add clear: both to label.
  • Set fixed width (e.g. 100px) to label.

input {
  display: block;
  float: left;
}
label {
  float: left;
  clear: both;
  width: 100px;
}
<fieldset id="o-bs-sum-buginfo">
  <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
  <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />

  <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
  <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
</fieldset>

于 2016-01-07T21:14:29.560 に答える
1

対応する入力を含むすべてのラベルを ap タグに入れます。次に、次の css を追加します。

label{
  float:left;
  width:100px; //whatever width that suits your needs
}

p{
    margin:10px 0; //manipulate the vertical spaces for each input..  
}



<fieldset id="o-bs-sum-buginfo">
  <p>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />
  </p>
</fieldset>
于 2011-01-09T19:56:33.343 に答える
0

これが「自然な」セマンティック マークアップ、つまり、非セマンティック ラッパー要素を使用せずlabel、対応するものを含むinputことで、ややぎこちないfor属性で参照する必要がないかどうかを知りたいと思っていました。

<fieldset>
  <label>Error Prefix<input/></label>
  <label>Error Number<input/></label>
</fieldset>

テキストは個別の要素ではないため、固定幅のラベルはここで入力を揃えません。Shahid の洗練された最小限のソリューションも機能しませんが、すべての入力を同じ幅にする場合 (IMHO のように見えます)とにかくいいです）あなたはそれらをすることができfloatますright：

label { display:block; margin:8px; width:360px; clear:right; overflow:auto; }
input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }

は-moz-box-sizing、FF29 がリリースされたときに冗長になるはずです。またbox-sizing、フォーム コントロール タイプを混在させない限り、 も必要ありません。clearとはoverflowに特に必要ですtextarea。

混合入力タイプの完全な例:

<!DOCTYPE html>
<html>
  <head>
    <title>Aligned labels</title>
    <style>
      label { display:block; margin:8px; width:360px; clear:right; overflow:auto; }
      input, button, textarea, select { box-sizing:border-box; -moz-box-sizing:border-box; width:200px; float:right; }
    </style>
  </head>
  <body>
    <label>Name<input type="text" value="Sir Galahad of Camelot"/></label>
    <label>Quest<textarea>I seek the Holy Grail</textarea></label>
    <label>Favourite Colour<select><option>Blue</option><option>Yellow</option></select></label>
    <label>If you're sure...<button>Give Answers</button></label>
  </body>
</html>
于 2014-04-03T17:44:41.453 に答える