Bagaimana membuat lebar elemen: 100% minus padding?

Saya punya input html.

Inputnya padding: 5px 10px;saya ingin 100% dari lebar div induk (yang cair).

Namun menggunakan width: 100%;menyebabkan input menjadi 100% + 20pxbagaimana saya bisa mengatasi ini?

Contoh

box-sizing: border-box adalah cara cepat dan mudah untuk memperbaikinya:

Ini akan bekerja di semua browser modern , dan IE8 +.

Berikut ini demo: http://jsfiddle.net/thirtydot/QkmSk/301/

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

Versi awalan peramban ( -webkit-box-sizing, dll.) Tidak diperlukan di peramban modern.

Ini sebabnya kami punya box-sizing CSS.

Saya telah mengedit contoh Anda, dan sekarang ini berfungsi di Safari, Chrome, Firefox, dan Opera. Lihat: http://jsfiddle.net/mathias/Bupr3/ Yang saya tambahkan adalah ini:

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

Sayangnya browser lama seperti IE7 tidak mendukung ini. Jika Anda mencari solusi yang berfungsi di IE lama, lihat jawaban lain.

Gunakan pengisi dalam persentase juga dan hapus dari lebar:

bantalan: 5%;
lebar: 90%;

Anda dapat melakukannya tanpa menggunakan box-sizingdan tidak menghapus solusi seperti width~=99%.

Demo di jsFiddle :

• Simpan input paddingdanborder
• Tambahkan ke input horisontal negatif margin= border-width+horizontal padding
• Tambahkan ke pembungkus input horisontal paddingsama dengan margindari langkah sebelumnya

Markup 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 */ 
}

Gunakan css calc ()

Sangat sederhana dan mengagumkan.

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

Seperti terlihat di sini: Lebar Div 100% dikurangi jumlah piksel tetap
Oleh webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Sumber asli: http://web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

Hanya menyalin ini di sini, karena saya hampir melewatkannya di utas lainnya.

Dengan asumsi saya berada dalam wadah dengan bantalan 15px, inilah yang selalu saya gunakan untuk bagian dalam:

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

Itu akan meregangkan bagian dalam untuk apa pun lebar itu harus kurang dari 15px di kedua sisi.

Anda dapat mencoba beberapa trik penentuan posisi. Anda dapat memasukkan input dalam div dengan position: relativedan ketinggian tetap, kemudian pada input miliki position: absolute; left: 0; right: 0;, dan bantalan apa pun yang Anda suka.

Contoh langsung

Berikut adalah rekomendasi dari codeontrack.com , yang memiliki contoh solusi yang baik:

Alih-alih mengatur lebar div ke 100%, atur ke auto, dan pastikan, bahwa div <div>diatur ke tampilan: blok (default untuk <div>).

Pindahkan padding kotak input ke elemen pembungkus.

<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>

Lihat contoh di sini: http://jsfiddle.net/L7wYD/1/

Cukup pahami perbedaan antara lebar: otomatis; dan lebar: 100%; Lebar: otomatis; akan (OTOMATIS) MATERI menghitung lebar agar sesuai dengan yang diberikan dengan pembungkus div termasuk padding. Lebar 100% memperluas lebar dan menambahkan bantalan.

Bagaimana dengan membungkusnya dalam wadah. Container harus memiliki gaya seperti:

{
    width:100%;
    border: 10px solid transparent;
}

Coba ini:

width: 100%;
box-sizing: border-box;

Bagi saya, menggunakan margin:15px;padding:10px 0 15px 23px;width:100%, hasilnya adalah ini:

Solusi bagi saya adalah menggunakan width:autoalih-alih width:100%. Kode baru saya adalah:

margin:15px;padding:10px 0 15px 23px;width:auto. Kemudian elemen disejajarkan dengan benar:

Saya memiliki masalah yang sama. Perbaiki seperti ini:

width: 100%;
box-sizing: border-box;

Kamu bisa melakukan ini:

width: auto;
padding: 20px;