web-dev-qa-db-ja.com

ラベルと入力を揃えるCSS

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）のみを使用して、ラベルと入力要素を隣り合わせにペアリングします。 Tweak the HTMLを変更する自由もあります。もし必要なら。

jqueryhtmlcssinputlabels
39
hashg

これは、正しく実行するのが驚くほど難しい場合があることの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 */
}

お役に立てば幸いです。

Edit：各プラグインの幅を設定するためにこのプラグインを使用できます：

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();

そしてそれだけです...すべてのラベルは最も長いラベルの幅を取ります

84
Spudley

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

10
Shahid

JavaScript、jQuery、または追加のdivsを使用する必要はありません。必要なことは：

  • inputとlabelの両方を左にフロートします（フロートするにはinputをブロックする必要があることに注意してください）。
  • clear: bothをlabelに追加します。
  • 固定幅（例：100px）を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>
1
Michał Perłakowski

すべてのラベルとそれに対応する入力をpタグに入れます。次に、次の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>
1
amosrivera

単純なCSSトリックにjavascriptを使用するのはやり過ぎだと思います。ここに私が今作ったものがあります： http://jsfiddle.net/t6R93/

div{
  display: table-row;
}
label,input{
  display:table-cell;
}

PS：他のブラウザに欠陥があるかもしれません。 Chromeでのみテストしました。

1
egiray

「自然な」セマンティックマークアップ、つまり非セマンティックラッパー要素を使用せずに、参照する代わりに対応する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>
0
mrec