36

（以降、「テキストボックス」と呼びます）を に設定して<input type="text">、親コンテナを埋めようとしています。これは、テキストボックスにパディングを与えるまで機能します。これがコンテンツの幅に追加され、入力フィールドがオーバーフローします。Firefox では、これはコンテンツを標準に準拠してレンダリングする場合にのみ発生することに注意してください。quirks モードでは、別のボックス モデルが適用されるようです。width100%

最新のすべてのブラウザーで動作を再現するための最小限のコードを次に示します。

#x {
  background: salmon;
  padding: 1em;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}
<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

私の質問:テキストボックスをコンテナに合わせるにはどうすればよいですか?

注意: の場合<div id="y">、これは簡単です: 単純に設定しwidth: autoます。ただし、テキストボックスに対してこれを実行しようとすると、効果が異なり、テキストボックスはデフォルトの行数を幅として使用します(display: blockテキストボックスに設定しても)。

編集: David のソリューションはもちろん機能します。ただし、HTML を変更したくはありません。特に、セマンティック機能のないダミー要素を追加したくありません。これは、私が絶対に避けたいディビティスの典型的なケースです。これは最後の手段のハックにすぎません。

4

11 に答える 11

27

CSS3 では、入力に box-sizing プロパティを使用して、ボックス モデルを標準化できます。このようなものは、パディングを追加して 100% 幅にすることができます:

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

残念ながら、これは IE6/7 では機能しませんが、残りは問題ありません (互換性リスト)。したがって、これらのブラウザーをサポートする必要がある場合は、Davids ソリューションが最適です。

詳細については、Chris Coyier によるこの素晴らしい記事をご覧ください。

お役に立てれば！

于 2011-03-23T13:19:56.877 に答える
22

テキストボックスをで囲み、<div>それを与えることができ<div> padding: 0 20pxます。問題は、100％の幅にパディングやマージンの値が含まれていないことです。これらの値は100％の幅の上に追加されるため、オーバーフローします。

于 2008-09-09T19:02:04.110 に答える
3

Box-Modellの定義と実装の方法のため、この問題に対するcssのみの解決策はないと思います。（マシューが説明したこととは別に、パディングにもパーセンテージを使用します。たとえば、幅：94％、パディング：0 3％;）

ただし、ページの読み込み時に幅を動的に計算するJavascriptコードを作成することもできます...うーん、もちろん、ブラウザウィンドウのサイズが変更されるたびにその値を更新する必要があります。

私が行ったいくつかのテストの興味深い副産物：Firefoxはwidth: 100%;、さらにmax-widthを100％に設定した場合、入力フィールドの幅を100％に設定します。ただし、これはOpera9.5またはIE7では機能しません（古いバージョンはテストされていません）。

于 2008-09-09T22:45:50.063 に答える
2

残念ながら、これは純粋な CSS では不可能です。自明ではない柔軟だが制約のある UI 動作には、HTML または Javascript の変更が必要です。CSS3 列はこの点で多少は役立ちますが、あなたのようなシナリオでは役に立ちません。

Davidのソリューションは最もクリーンです。これは実際には divitis のケースではありません。不必要に多数の div を追加したり、"p" や "h1" などのクラス名をそれらに付けたりしていません。それは特定の目的に役立ちます。この場合の良い点は、拡張可能なソリューションでもあることです。たとえば、それ以上何も追加しなくても、いつでも丸みを帯びた角を追加できます。空の div であるため、アクセシビリティにも影響はありません。

Fwiw、すべてのテキストボックスを実装する方法は次のとおりです。

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

次に、CSS を使用して角を丸くしたり、あなたの場合のようにパディングを追加したりできますが、その必要はありません。これらのサイド div を完全に非表示にして、通常の入力テキストボックスだけを自由に使用できます。 .

他の解決策は、テーブルを使用することです。たとえば、Amazon はテーブルを使用して柔軟でありながら制約のあるレイアウトを取得したり、Javascript を使用してサイズを微調整し、ウィンドウのサイズ変更時にそれらを更新したりします。たとえば、Google ドキュメント、マップなどはすべてこれを行います。

とにかく、私の 2 セント: このような場合に理想主義が実用性の邪魔にならないようにしてください。:) David のソリューションは機能し、HTML をほとんど混乱させません (実際、「before」や「after」などのセマンティックなクラス名を使用することは、依然として非常にクリーンです)。

于 2009-07-04T18:39:26.637 に答える
1

この動作は、ボックス モデルの解釈が異なるために発生します。正しいボックス モデルは、幅がコンテンツにのみ適用され、パディングとマージンが追加されることを示しています。したがって、合計幅として 100% プラス 20px の左右のパディングが 100%+40px になります。quirks モードとも呼ばれる元の IE ボックス モデルには、幅にパディングとマージンが含まれています。この場合、コンテンツの幅は 100% - 40px になります。これが、2 つの異なる動作が見られる理由です。私が知る限り、これに対する解決策はありませんが、幅を 98% に設定し、パディングを両側で 1% に設定することによる回避策があります。

于 2008-09-09T21:00:49.377 に答える
1

@Domenicこれは機能しません。width auto は、 width の初期値が auto であるため、その要素のデフォルトの動作以外には何もしません (164 ページ、Cascading Style Sheets Level 2 Revision 1 Specification を参照)。ブロック タイプの表示の割り当ても機能しません。これは単に要素を表示するときにブロック ボックスを使用するようにブラウザに指示するだけで、div のようにできるだけ多くのスペースを取るというデフォルトの動作を割り当てません (121 ページ、カスケーディング スタイルを参照)。シート レベル 2 リビジョン 1 仕様)。その動作は、CSS や HTML 定義ではなく、ビジュアル ユーザー エージェントによって処理されます。

于 2008-09-09T21:38:47.633 に答える
0

負のマージンでオーバーフローに対抗できると思います。すなわち

margin: -1em;
于 2008-09-09T18:45:56.003 に答える
0

デフォルトのパディングと境界線では、テキストボックスが真に 100% にならないため、最初にそれらを 0 に設定する必要があります。

input {
    background: red;
    padding: 0;
    width: 100%;
    border: 0; //use 0 instead of "none" for ie7 
}

次に、境界線と必要なパディングまたはマージンをテキストボックスの周りの div に配置します。

.text-box {
    padding: 0 20px;
    border: solid 1px #000000;
}

<body>
    <div id="x">
        <div id="y">x</div>
        <div class="text-box"><input type="text"/></div>
    </div>
</body>

これにより、テキストボックスを拡張可能にし、javascript なしで必要な正確なサイズにすることができます。

于 2010-12-17T16:12:42.140 に答える