ปัญหาเกี่ยวกับ CSS Borders และ Overflow

ฉันมีปัญหากับการโอเวอร์โฟลว์และการแสดงเส้นขอบ

ฉันมีเนื้อหาในรายการแบบไม่เรียงลำดับซึ่งฉันได้ตั้งค่าเป็น overflow: scroll; ปัญหาคือ เมื่อฉันกำหนดเส้นขอบให้กับรายการที่ไม่เรียงลำดับ เส้นขอบจะไม่ขยายไปยังองค์ประกอบที่ล้น

ฉันต้องการให้เส้นขอบสำหรับ #times และ #channel-rows ul เพื่อขยายและครอบคลุมองค์ประกอบที่อยู่นอกเส้นขอบ K L M N O P ไม่ได้อยู่ในชายแดน เนื้อหาในแถว B ก็ไม่ถูกบังด้วยเส้นขอบเช่นกัน ฉันจะทำให้องค์ประกอบเหล่านี้อยู่ในขอบเขตเดียวกันกับองค์ประกอบก่อนหน้าได้อย่างไร

ใครสามารถยกตัวอย่างเกี่ยวกับวิธีทำให้เส้นขอบขยายออกไปในพื้นที่ล้นได้หรือไม่

โปรดดู JSFiddle

JSFiddle.


html css border overflow
person Glitchezz    schedule 15.05.2014    source แหล่งที่มา
comment
คุณสามารถโพสต์ HTML, CSS, jsfiddle.net ได้ไหม?   -  person SW4    schedule 15.05.2014
comment
ภาชนะของคุณมีน้ำล้นเกินไปหรือเปล่า?   -  person faby    schedule 15.05.2014
comment
ฉันเดาว่านี่จะช่วยแก้ปัญหาของคุณหรือไม่? jsfiddle.net/webtiki/LzHWM   -  person web-tiki    schedule 15.05.2014
comment
โปรดดู JSFiddle ในโพสต์ต้นฉบับ @ SW4   -  person Glitchezz    schedule 15.05.2014
comment
@faby โปรดดูตัวอย่าง ฉันต้องการรายการแบบไม่เรียงลำดับหลายรายการเพื่อเลื่อนดูพร้อมกัน - ขอบคุณ   -  person Glitchezz    schedule 15.05.2014
comment
@Glitchezz เส้นขอบที่ทำให้โค้ดไม่ทำงานคืออะไร   -  person faby    schedule 15.05.2014

คำตอบ (2)


arrow_upward
4
arrow_downward

1) เพิ่ม wrapper ให้กับเนื้อหาที่เลื่อนได้ด้วย display:table

2) ตั้งค่าความกว้าง:100% สำหรับลูก #times และ #channel-rows

สนุก!

อัปเดตซอ

person Danield    schedule 15.05.2014
comment
นี่ค่อนข้างฉลาด ตารางจะต้องทาสีแตกต่างจากองค์ประกอบระดับบล็อก - person Marc Audet; 15.05.2014
comment
หมายเหตุ ใช้งานไม่ได้กับ IE 11 หรืออาจมีผลที่ไม่พึงประสงค์หากใช้งาน ฉันเปลี่ยนมาใช้ display:inline-block; และทำงานได้ตามที่ฉันต้องการเช่นกัน แต่สิ่งนี้ทำให้ฉันเริ่มต้นได้ - person interesting-name-here; 15.05.2017

arrow_upward
0
arrow_downward

ลบความกว้างคงที่ออกจาก #times และ #channel-rows และจะช่วยแก้ปัญหาของคุณได้ หากคุณต้องการฉันจะอัปเดตซอของคุณ

#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
ฉันลองสิ่งนี้ มันไม่ทำงาน เส้นขอบยังไม่ขยายเข้าไปในพื้นที่เลื่อน - person Glitchezz; 15.05.2014
comment
บางทีฉันอาจไม่เข้าใจว่าซึ่งเป็นขอบเขตที่ผิด ถ้าคุณบอกฉันว่าอันไหนฉันจะลบมันออกเพื่อแสดงให้เห็นว่าควรเป็นอย่างไร - person faby; 15.05.2014
comment
ไม่มี 'ขอบเขตที่ผิด' ฉันต้องการเส้นขอบสำหรับ #times และ #channel-rows ul เพื่อขยายและครอบคลุมองค์ประกอบที่อยู่นอกเส้นขอบ K L M N O P ไม่ได้อยู่ในชายแดน เนื้อหาทั้งหมดในแถว B ไม่มีเลย ฉันจะนำสิ่งเหล่านี้ไปอยู่ในขอบเขตเดียวกันกับองค์ประกอบก่อนหน้าได้อย่างไร - person Glitchezz; 15.05.2014
comment
ปัญหาคือ #channel-rows และ #times width คงที่ ให้ความกว้างสูงขึ้น - person faby; 15.05.2014