web-dev-qa-db-ja.com

HTML入力要素を並べる方法は？

HTMLページの入力要素を並べるためのリソースを見つけたいと思っています。 width style属性を使用しても、select要素とテキストボックスを同じ幅にするのは困難であり、ブラウザー間でさらに困難です。最後に、ファイル入力は同じ幅のクロスブラウザに到達することは不可能のようです。これを達成するための良いガイドやヒントはありますか？おそらく、設定する必要のあるデフォルトのCSS属性がいくつかあります。

htmlcsscss-reset
24
Greg

これをInternetExplorer 7、Firefox 3、Safari/GoogleChromeでテストしました。 <select>と<input type="file">の問題は間違いなくわかります。私の調査結果によると、すべての入力を同じ幅でスタイル設定した場合、<select>はすべてのブラウザーで約5ピクセル短くなります。

Eric Meyer CSSリセットスクリプト を使用してもこの問題は解決しませんが、<select>入力を5ピクセル広くすると、メジャーで非常に良好な（完全ではありませんが）配置が得られます。ブラウザ。唯一異なるのはSafari/Google Chromeで、他のすべてのブラウザよりも1ピクセルまたは2ピクセル広いように見えます。

<input type="file">に関する限り、そこでのスタイリングにはあまり柔軟性がありません。 JavaScriptがオプションである場合は、メソッド quirksmodeに表示 を実装して、ファイルアップロードコントロールのスタイルをより細かく制御できます。

一貫した入力幅を持つ典型的なフォームについては、以下のXHTML 1.0Strictの完全な作業例を参照してください。これは、幅が一貫していないという同じ問題があるため、ここで他の人が指摘した100％幅のトリックを使用しないことに注意してください。さらに、テーブルは表形式のデータにのみ使用され、レイアウトには使用されないため、フォームのレンダリングに使用されるテーブルはありません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Example Form</title>
  <style type="text/css">
    label,
    input,
    select,
    textarea {
      display: block;
      width: 200px;
      float: left;
      margin-bottom: 1em;
    }
    
    select {
      width: 205px;
    }
    
    label {
      text-align: right;
      width: 100px;
      padding-right: 2em;
    }
    
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="Java">Java</option>
        <option value="Ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="Perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>

</html>
17
cowgod

私は通常、それらを必要な幅のdivまたはtableセル（ホラー！私は知っています）内に配置し、selectおよびinput style：widthを100％に設定して、それらが含まれるdiv /セルを埋めます。

13
Ron Savage

selectとinput要素の境界線とパディングを0に設定すると、それらは同じ幅であることがわかりました。 （テスト済みChrome 14、Firefox 7.0.1、Opera 11.51、IE 9）

Select要素とinput要素に1pxの境界線/パディングを配置すると、入力要素が2ピクセル広くなります。例えば：

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}
2
Dalius

幅以外に、境界線とマージンも設定します。これらは、コントロールに影響する場合と影響しない場合があります。このようなものが役立つかもしれません：

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

ロン もいい考えです。

1
Matthew Scharley

これは、<input>を使用すると、（他のほとんどの要素と同様に）幅に境界線とパディングが追加されるためです。 <select>を使用すると、古いIE quirksモードの場合と同様に、境界線とパディングが幅に含まれます。

これを考慮して幅を増やすことで、これを回避できます。

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

または（ブラウザのサポートに依存できる場合）、新しいCSS3ボックスサイズプロパティを使用して、それらを一貫して動作させ、要素の幅の外側にパディングと境界線を描画できます。

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

または、box-sizingをborder-boxに設定して、入力がselectのように動作し、ボックスの幅の内側にパディングが描画されるようにすることもできます。

Chrome、IE8、FFでテスト済み

0
Jim

どうしても必要な場合{幅：100％; }であり、ピクセル単位の幅で指定されていない場合、jQueryはあなたの友達です：

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6ピクセルが最適です（FF9）。必要に応じて編集してください。

0
Slawa

私は思いません ロンの アイデアはうまくいきます...

テストケース：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

これにより、入力が選択よりも数ピクセル広くなります（これはおそらくOSに依存します）。選択のスタイルはOS（少なくともWindowsテーマ）に依存しているように見えるため、+ 5pxのトリックを使用しても、これが達成できるかどうかはわかりません。

0
AlfaTeK

ファイル入力はブラウザ間で根本的に異なる可能性があり、カスタマイズの方法があまり許可されていないため、煩わしい場合がありますが、セキュリティの観点からも理解できます。たとえば、ほとんどのブラウザに表示される「参照」ボタンのテキストを変更するか、Safariで入力されたファイルを他のブラウザと比較してみてください...

0
mmacaulay

CSSファイルをいくつかの基本設定で開始しますか？すべての要素でパディングとマージンをオフにすると便利な場合があります。これが選択/入力要素に影響を与える可能性があるかどうかを確認するためのテストは行っていません。

EricMeyerからのCSSリセットの例を次に示します。

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

0
Dave Rutledge