Pertanyaan Ketika elemen anak meluber secara horizontal, mengapa padding yang tepat dari orang tua diabaikan?


Mengingat struktur sederhana ini:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

dengan CSS ini:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Demo langsung:  http://jsfiddle.net/523me/5/

Perhatikan bahwa orang tua memiliki 20px padding dan bahwa anak meluap secara horizontal (karena itu lebih lebar). Jika Anda menggulirkan induknya ke kanan, Anda akan melihat bahwa anak menyentuh tepi kanan orang tua.

Jadi, orang tua harus memiliki padding yang tepat, tetapi itu diabaikan. Tampaknya ketika anak memiliki lebar tetap, bantalan kanan orangtua tidak berlaku. (Apakah ini ditentukan oleh standar? Saya ingin tahu. Tolong beritahu saya jika Anda menemukan sesuatu!)

Apakah ada cara untuk memaksa padding yang tepat untuk diterapkan dalam skenario ini tanpa harus menghapus salah satu elemen dari aliran (dengan mengambang atau posisi)?

enter image description here

Screenshot 1 - Padding kanan diabaikan. Ini adalah bagaimana semua browser saat ini berperilaku.

Screenshot 2 - Padding kanan berlaku. Inilah yang ingin saya capai. (Btw, tangkapan layarnya dari IE7, yang merupakan satu-satunya browser yang tidak mengabaikan padding yang tepat.)


32
2018-04-07 13:23


asal


Jawaban:


Anda menderita ini masalah.

Saya akan menyelesaikannya dengan memberikan margin kepada anak (dan bukan padding kepada orang tua):

#parent {
    width: 200px;
    height: 200px;
    overflow-x: scroll;
    background: gray;
}

#child {
    width: 500px;
    background: yellow;  
    display: inline-block;
    margin: 20px; 
}

Demo: jsFiddle


20
2018-04-07 14:30



Tidak, paddingnya tidak diabaikan, tapi masih di dalam induk.

Lihat diperbarui jsFiddle, di mana Anda dapat melihat bahwa padding belum bergerak dari posisi semula.

Edit: Hm, ada beberapa anomali. Jika Anda memberi div dalam margin yang tepat, itu juga akan diabaikan. Hm. Upvot pertanyaan Anda.


2
2018-04-07 14:17



Tidak tahu tapi menambahkan:

#child{
  display: inline-block;
}

Tampaknya untuk memperbaikinya: http://jsfiddle.net/523me/6/

Saya hanya menguji di Chrome terbaru, mungkin bukan peramban silang


1
2018-04-07 14:15



Anda dapat mengubah padding ke perbatasan.

padding: 20px;

untuk

border: 20px solid gray;

1
2018-04-07 14:17



Terapkan padding-kanan ke elemen melimpah itu sendiri, dan memindahkan latar belakang ke elemen turunan langsungnya.

<div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/


0
2018-04-07 14:29