447

私はhtml入力を持っています。

入力にpadding: 5px 10px;は、親 div の幅 (流動的) の 100% が必要です。

ただし、を使用するwidth: 100%;と、入力が次のようになり100% + 20pxます。これを回避するにはどうすればよいですか?

例

4

15 に答える 15

582

box-sizing: border-boxそれを修正するための迅速で簡単な方法です：

これは、最新のすべてのブラウザと IE8+ で動作します。

ここにデモがあります：http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

最新のブラウザーでは、ブラウザーのプレフィックス付きのバージョン (-webkit-box-sizingなど) は必要ありません。

于 2011-03-07T12:15:31.857 に答える
286

これがbox-sizing、CSS を使用する理由です。

あなたの例を編集したところ、Safari、Chrome、Firefox、Opera で動作するようになりました。それをチェックしてください：http://jsfiddle.net/mathias/Bupr3/ 私が追加したのはこれだけです：

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

残念ながら、IE7 などの古いブラウザはこれをサポートしていません。古い IE で動作するソリューションを探している場合は、他の回答を確認してください。

于 2011-03-07T12:34:53.543 に答える
29

のような明確なソリューションを使用せずに実行できbox-sizingます。width~=99%

jsFiddle のデモ:
ここに画像の説明を入力

  • キープ入力paddingとborder
  • 入力負の水平に追加margin= border-width+horizontal padding
  • 前のステップからpaddingと等しい水平方向の入力のラッパーに追加しますmargin

HTML マークアップ:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}
于 2012-06-28T05:46:34.090 に答える
25

css calc() を使用する

超シンプルで素晴らしい。

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

ここに見られるように: Div 幅 100% から固定量のピクセルを差し引いたもの
webvitaly による ( https://stackoverflow.com/users/713523/webvitaly )
元のソース: http://web-profile.com.ua/css/dev/css -width-100prc-minus-100px/

他のスレッドでほとんど見逃していたので、これをここにコピーしました。

于 2014-03-14T15:14:19.253 に答える
12

私が15pxのパディングを持つコンテナにいると仮定すると、これは私が常に内側の部分に使用するものです:

width:auto;
right:15px;
left:15px;

これにより、内側の部分が、両側の 15px よりも小さい幅に引き伸ばされます。

于 2013-11-29T12:42:44.467 に答える
6

codeontrack.comからの推奨事項を次に示します。これには、優れたソリューションの例があります。

div の幅を 100% に設定する代わりに auto に設定し、<div>が display: block ( のデフォルト<div>) に設定されていることを確認してください。

于 2015-09-21T12:04:39.730 に答える
4

入力ボックスのパディングをラッパー要素に移動します。

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

ここの例を参照してください：http：//jsfiddle.net/L7wYD/1/

于 2011-03-07T12:11:03.217 に答える
2

width:auto; の違いを理解してください。および幅:100%; 幅:自動; (AUTO)MATICALLY は、パディングを含むラッピング div の正確な指定に合わせて幅を計算します。幅 100% は幅を広げ、パディングを追加します。

于 2017-05-15T17:18:46.277 に答える
0

これを試して：

width: 100%;
box-sizing: border-box;
于 2015-12-03T15:55:39.347 に答える
0

容器に包んではどうでしょう。コンテナは次のようなスタイルにする必要があります。

{
    width:100%;
    border: 10px solid transparent;
}
于 2015-08-21T13:31:38.963 に答える
-1

私にとって、を使用するmargin:15px;padding:10px 0 15px 23px;width:100%と、結果は次のようになりました。

ここに画像の説明を入力

私にとっての解決策は、のwidth:auto代わりに使用することでしwidth:100%た。私の新しいコードは次のとおりです。

margin:15px;padding:10px 0 15px 23px;width:auto. 次に、要素が適切に配置されます。

ここに画像の説明を入力

于 2019-10-14T22:02:52.640 に答える
-9

あなたはこれを行うことができます：

width: auto;
padding: 20px;
于 2012-07-01T16:01:48.780 に答える