144

オブジェクトにパディングを設定すると、明示的に設定されていても幅が変更されることがわかりました。この背後にあるロジックについて議論することはできますが、一部の要素でいくつかの問題が発生します。

ほとんどの場合、100% に設定されたものではなく、子要素を追加してその要素にパディングを追加するだけですが、フォーム入力の場合、それは可能な手順ではありません。

これを見てください：

body {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

DIV.formfield {
  clear: both;
  margin: 0px;
  padding: 10px;
}

DIV.formlabel {
  margin-top: 20px;
  padding: 5px;
  font-weight: bold;
  text-align: left;
}

DIV.formvalue {
  background-color: #eee;
  border: 1px solid red;
  padding: 10px;
  margin: 0px;
}

DIV.formvalue.correct {
  border: 1px solid green;
}

textarea.textarea {
  width: 100%;
  min-height: 80px;
}

input.input {
  width: 100%;
  padding: 5px;
}

input.input2 {
  width: 100%;
}

input.input3 {
  width: 100%;
  padding: 5px;
  margin: -5px;
}

input.input4 {
  width: 100%;
  padding: 10px;
  margin: -10px;
}

input.input5 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
<div class='formfield' id='field_text'>
  <div class='formlabel'>No padding</div>
  <div class='formvalue'>
    <textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
  </div>
  <div class='formlabel'>Also no padding</div>
  <div class='formvalue'>
    <input type='text' class='input2' name='apa' value='Or here...' />
  </div>
  <div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
  <div class='formvalue'>
    <input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
  </div>
  <div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
  <div class='formvalue'>
    <input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
  <div class='formvalue'>
    <input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
  <div class='formvalue correct'>
    <input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
  </div>
</div>

2 番目の入力のパディングは 5px に設定されており、これはデフォルト設定よりも非常に好みです。しかし、残念なことに、100% の幅に 10px を追加するなど、入力がすべての方向に 10px 大きくなります。

ここでの問題は、入力内に子要素を追加できないため、修正できないことです。質問は次のとおりです。

幅 100% を維持しながら、入力内にパディングを追加する方法はありますか? フォームは異なる幅の親でレンダリングされるため、100% である必要があるため、親の幅が事前にわかりません。

4

9 に答える 9

313

CSS3を使用すると、プロパティbox-sizingを使用して、ブラウザが入力の幅を計算する方法を変更できます。

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

あなたはここでそれについてもっと読むことができます：http：//css-tricks.com/box-sizing/

于 2012-12-17T16:29:20.230 に答える
7

クロスブラウザとの互換性（FirefoxとSafariで動作します）はわかりませんが、次の解決策を試すことができます。

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

（変更した値のみを投稿しました）

于 2009-09-04T07:39:29.547 に答える
7

1 つのオプションは、パディングのある でINPUTラップすることです。DIV

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
于 2009-09-04T07:50:22.800 に答える
4

私はこれに似たものでいくつかの問題を抱えています。入力が 100% でパディングが小さい tds があります。私がしたことは、次のように td のパディングを補正することでした:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

入力/テキストエリアの境界線とパディングを含めるための 8px のパディング。お役に立てれば！

于 2011-11-01T15:17:19.240 に答える
2

おそらく、border + backgroundを削除し、代わりにborder + backgroundとwidth：100％でinput囲み、 ？にマージンを設定します。divinput

于 2009-09-04T07:44:37.197 に答える
1

私が見つけた解決策の 1 つは、相対的に配置された親タグを使用して入力を絶対に配置することです。

<p class="full-width-input">
    <input type="text" class="text />
</p>

スタイルを適用します。

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

注意すべき唯一のことは、絶対配置された子がその高さを拡張しないため、段落タグには高さの設定が必要であることです。width: 100%これにより、親要素の左右にロックして設定する必要がなくなります。

于 2012-03-16T11:56:35.767 に答える
0

パディングにパーセンテージを使用してみてください。

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

ボックスシャドウが表示されない古いブラウザのユーザーが心配な場合は、バックアップとして入力に微妙な背景色を指定してください。この種の目的でピクセルを使用している場合は、他の場所でピクセルを使用している可能性があります。これにより、いくつかの追加の課題が発生する可能性があります。ピクセルに遭遇した場合はお知らせください。

于 2013-01-30T21:28:53.157 に答える
-3

これを防ぐために私が知っている唯一のことは、100%-10 のような値を割り当てることです。しかし、それにはいくつかの互換性の問題があります。

于 2009-09-04T07:35:44.670 に答える