jquery 頭揃え ラベルと入力を整列するCSS




複数行で、文字の空白と先頭を揃える (5)

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

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

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

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を微調整する自由も持っています。 もし必要なら。


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


私は、これが "自然な"セマンティックマークアップ、つまり非セマンティックラッパー要素を持たず、対応するinputを含むlabelではなく、ややclunkyな属性を参照する必要がないかどうかを知りたいforです。

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

固定幅のラベルは、テキストが別の要素ではないため、ここで入力を整列させません.Shahidのエレガントな最小限の解決策も機能しませんが、すべての入力を同じ幅にすることを喜んですればいいえとにかく)あなたはそれらをright floatことができます:

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; }

FF29がリリースされたときに、 -moz-box-sizingは冗長でなければならず、フォームコントロールの種類を混在させない限り、 box-sizingは必要ありません。 clearoverflowは、特に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>

これは、驚くほど厄介なものになる可能性のあるものの1つです。

多くの人がfloat:left;使用を提案しfloat:left; このため。 個人的に、私は本当に浮動小数点を嫌いです。 彼らは解決するよりも多くの問題を引き起こすようです。

私の好みは、インラインブロックを使用することです。 これは、ブロックプロパティ(次元を指定できるようなもの)でインラインプロパティを組み合わせる(したがって、互いに隣の要素などを簡単に合わせることができる)表示メソッドです。

ですから、答えは単に両方をdisplay:inline-block;させること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();

そしてthats all ...あなたのすべてのラベルは、最長のラベルの幅をとるでしょう


JavaScript、jQuery、またはその他のdivを使用する必要はありません。 あなたはただしなければならない:

  • inputlabel両方を左に浮動させinputinputは浮動小数点にする必要があります)。
  • clear: both追加clear: bothlabellabel
  • 固定幅(例: 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>







labels