web-dev-qa-db-ja.com

HTMLで入力とテキスト入力を選択する-等しい幅にする最良の方法は？

私はそのような単純なフォームを持っています（説明目的のみ）...

<form>

   <div class="input-row">
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div class="input-row">
      <label>Country</label>
      <select name="country">
         <option>Australia</option>
         <option>USA</option>
      </select>
   </div>

</form>

CSSを使用した私のレイアウト方法は次のとおりです...

form  {
    width: 500px;
}

form .input-row {
    display: block;
    width: 100%;
    height: auto;
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */
    margin-bottom: 10px;
}

form .input-row label {
    display: block;
    float: left;
}

form .input-row input,
form .input-row select {
    display: block;
    width: 50%;
    float: right;
    padding: 2px;
}

私のselect要素（とにかくFirefoxの場合）が他のinput要素と常に同じ幅ではないことを除いて、これは非常にうまく整列しています。通常、数ピクセル分狭くなります。

幅をピクセルサイズに変更しようとしました（例：200px）しかし、違いはありません。

これらをすべて同じ幅にするための最良の方法は何ですか？ selectのwidthを個別に設定したり、テーブルに置いたりすることに頼らないことを願っています...

cssxhtml
73
alex

解決策は、フォーム要素のボックスモデルを指定することです。ブラウザは、border-boxを使用するときに最も同意する傾向があります。

input, select, textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

このようなトリックを集約する normalize.css プロジェクトがあります。

164
Kornel

100％幅のテーブルとセル、およびテーブルセルよりも幅の広いテキストボックス（幅も100％）で同じ問題が発生しました。

これでCSSの問題が解決しました。

table td
{
    padding-right: 8px;
}

これまでで最高のソリューションではありませんが、おそらく右側に追加のスペースができます。しかし、少なくともそれはもう隠れていません！

0
Herman Cordes

パディングは、テキストをボックスのエッジに近づけます。

マージンを0pxに設定してみて、それが正しいと思われる場合は、それで遊んでください（単にmargin-leftのみを設定するように）

0
Luke Schafer