Masalah dengan Batas dan Luapan CSS

Saya mengalami masalah dengan overflow dan menampilkan batas.

Saya memiliki konten dalam daftar tidak berurutan yang telah saya setel ke overflow: scroll; Masalahnya adalah, ketika saya menetapkan batas ke daftar tidak berurutan, batas tersebut tidak meluas ke elemen yang meluap.

Saya ingin perbatasan untuk #times dan #channel-rows ul, memperluas dan menutupi elemen yang berada di luar perbatasan. K L M N O P tidak berada di perbatasan. Konten di Baris B juga tidak tercakup dalam batas. Bagaimana cara memasukkan elemen-elemen ini ke dalam batas yang sama dengan elemen sebelumnya?

Adakah yang bisa memberikan contoh bagaimana membuat perbatasan meluas hingga ke daerah luapan?

Silakan lihat JSFiddle.

JSFiddle.


html css border overflow
person Glitchezz    schedule 15.05.2014    source sumber
comment
dapatkah Anda memposting beberapa HTML, CSS, jsfiddle.net?   -  person SW4    schedule 15.05.2014
comment
apakah ulcontainer Anda sudah diatur overflownya juga?   -  person faby    schedule 15.05.2014
comment
Saya kira, apakah ini menyelesaikan masalah Anda? jsfiddle.net/webtiki/LzHWM   -  person web-tiki    schedule 15.05.2014
comment
Silakan lihat JSFiddle di postingan asli @ SW4   -  person Glitchezz    schedule 15.05.2014
comment
@faby silakan lihat contohnya. Saya memerlukan beberapa daftar tidak berurutan untuk digulir bersama. - terima kasih   -  person Glitchezz    schedule 15.05.2014
comment
@Glitchezz manakah batas yang membuat kode tidak berfungsi?   -  person faby    schedule 15.05.2014

Jawaban (2)


arrow_upward
4
arrow_downward

1) Tambahkan pembungkus ke konten yang dapat digulir dengan display:table

2) Tetapkan lebar: 100% pada anak #times dan #channel-rows

Menikmati!

FIDDLE YANG DIPERBARUI

person Danield    schedule 15.05.2014
comment
Ini agak pintar, tabel harus dicat berbeda dari elemen tingkat blok. - person Marc Audet; 15.05.2014
comment
CATATAN tidak berfungsi di IE 11 atau mungkin menimbulkan efek yang tidak diinginkan jika digunakan. Saya beralih ke display:inline-block; dan itu berfungsi sesuai keinginan saya, tetapi ini membantu saya memulai. - person interesting-name-here; 15.05.2017

arrow_upward
0
arrow_downward

hapus lebar tetap dari #times dan #channel-rows dan itu menyelesaikan masalah Anda. Jika Anda mau, saya perbarui biola Anda.

#times {
    float:right;
    padding: 10px 10px;
    width: 738px /*<-- THIS IS THE PROBLEM*/;
    border: 2px solid grey;
}

#channel-rows {
    background: none repeat scroll 0 0 #00FFFB;
    float:right;
    height: auto;
    width: 738px/*<-- THIS IS THE PROBLEM*/;;
}
person faby    schedule 15.05.2014
comment
Saya mencoba ini. Itu tidak berhasil. Batasnya masih belum meluas hingga ke area gulir. - person Glitchezz; 15.05.2014
comment
Mungkin saya tidak mengerti perbatasan mana yang salah. Jika Anda memberi tahu saya yang mana, saya akan menghapusnya untuk menunjukkan bagaimana seharusnya. - person faby; 15.05.2014
comment
tidak ada 'perbatasan yang salah'. Saya ingin perbatasan untuk #times dan #channel-rows ul, memperluas dan menutupi elemen yang berada di luar perbatasan. K L M N O P tidak berada di perbatasan. Tidak semua konten ada di Baris B. Bagaimana cara memasukkannya ke dalam batas yang sama dengan elemen sebelumnya? - person Glitchezz; 15.05.2014
comment
masalahnya adalah #channel-rows dan #times width telah diperbaiki. Beri mereka lebar yang lebih tinggi - person faby; 15.05.2014