幅100％ "到達"をパディングに到達する "

StackOverflow https://stackoverflow.com/questions/5488498

  •  14-11-2019
  •  | 
  •  

質問

入力フィールドを持つテーブルセルを持っています。入力フィールドはTableCellを埋めるが、そのパディングには届かないはずです。私がこのように見えたもの（Firebugと）：

Form Elementがパディングに達する

InputFieldを青い領域の内側に保持し、紫色のものにラッチしていない。

と：もちろん、私は最初にこのトピックについてここですべての質問を読みました。私はそのすべてを読み、実際に解決した答えを見つけることができませんでした。

それはすべての最新のブラウザ（IE7も同様に）で動作するべきです

私は他の質問のすべての解決策を試した状態でjsfiddleを使用しました。しかし、私はこれを働くためにこれを得ることができませんでした。 a）このための作業解決策はありますか？とb）このための素敵で労働のない解決策さえありますか？

なぜすべてブラウザで問題があるのですか？これはCSSの間違った仕様であると思います。もちろん「100％」と言っても、要素がコンテンツエリアの「100％」に収まるようにしたいからです。 パディングとマージンに流れ込むためのユースケースは何ですか？

役に立ちましたか？

解決

Well, here you go..

I'm using the exact same method as this answer.

See: http://jsfiddle.net/AKUsB/

CSS:

.inputContainer {
    background: #fff;
    padding: 3px 3px;
    border: 1px solid #a9a9a9
}
.inputContainer input {
    width: 100%;
    margin: 0; padding: 0; border: 0;
    display: block
}

HTML:

<div class="inputContainer">
    <input type="text" name="company" id="company" value="" class="formInputTextField" style="width: 100%;" />
</div>

他のヒント

The problem here is with the box model, when you say width: 100% it applies a pixel value based on what's available (which you can see under the "computed styles" option of a web inspector). However, padding is then added on to that width, so a padding of 5px would compute to a total width of 100% + 10px (5 for each side).

To fix this problem, you need to remove your padding, or incorporate it into your width value. For example:

input { width: 100%; padding: 0; }

Or

input { width: 90%; padding: 0 5%; } /* width totals 100% */

Most form elements, by default, inherit some amount of padding; so even if you're not specifically applying padding to the input, it's still on there because the browser defaults it to have padding.

I think you should try to use

box-sizing: border-box
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top