☰

入力内のパディングにより幅が100%に分割される 質問する

tag-icon • tag-icon css input padding
入力内のパディングにより幅が100%に分割される 質問する

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

ほとんどの場合、子要素を追加し、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 番目の入力のパディングは 5 ピクセルに設定されていますが、これはデフォルト設定よりもずっと好ましいです。しかし残念なことに、これにより入力はすべての方向に 10 ピクセル拡大し、100% の幅に 10 ピクセルが追加されます。

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

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

ベストアンサー1

CSS3を使用すると、プロパティを使用することができますボックスサイズブラウザが幅を計算する方法を変更するには入力。

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

詳細については、こちらをご覧ください:http://css-tricks.com/box-sizing/

おすすめ記事