Div ด้วยการเลื่อนในแนวนอนเท่านั้น

Question 1

ฉันมี DIV ที่มีความกว้างคงที่ซึ่งมีตารางที่มีหลายคอลัมน์และจำเป็นต้องอนุญาตให้ผู้ใช้เลื่อนตารางในแนวนอนภายใน DIV

สิ่งนี้จำเป็นต้องทำงานบน IE6 และ IE7 เท่านั้น (แอปพลิเคชันไคลเอนต์ภายใน)

ต่อไปนี้ใช้งานได้ใน IE7:

overflow-x: scroll;

ใครสามารถช่วยแก้ปัญหาที่ทำงานใน IE6 ด้วย?

Question 2

การแก้ปัญหาค่อนข้างตรงไปตรงมา เพื่อให้มั่นใจว่าเราจะไม่ส่งผลกระทบต่อความกว้างของเซลล์ในตารางเราจะปิดพื้นที่สีขาว เพื่อให้แน่ใจว่าเราได้รับแถบเลื่อนแนวนอนเราจะเปิดล้น-X และนั่นก็ค่อนข้างมาก:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

คุณสามารถดูผลลัพธ์สุดท้ายได้ที่นี่หรือในภาพเคลื่อนไหวด้านล่าง ถ้าตารางกำหนดความสูงของภาชนะของคุณคุณไม่ควรจะต้องกำหนดอย่างชัดเจนที่จะoverflow-y hiddenแต่เข้าใจว่ายังเป็นตัวเลือก

Question 3

ฉันไม่สามารถหาคำตอบที่เลือกเพื่อใช้งานได้ แต่หลังจากการวิจัยเล็กน้อยฉันพบว่า div การเลื่อนแนวนอนต้องมีwhite-space: nowrapใน css

นี่คือรหัสการทำงานที่สมบูรณ์:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>

Question 4

overflow-x: scroll;
overflow-y: hidden;

แก้ไข:

มันใช้ได้กับฉัน:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>

Question 5

สำหรับการเลื่อนแนวนอนให้คำนึงถึงคุณสมบัติทั้งสองนี้:

overflow-x:scroll;
white-space: nowrap;

ดูลิงค์การทำงาน: คลิกฉัน

HTML

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}

Question 6

ลองสิ่งนี้:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

ช่องว่างสีขาว: nowrap; คุณสมบัติไม่อนุญาตให้คุณตัดข้อความ ดูตัวอย่างได้ที่นี่: https://codepen.io/oezkany/pen/YoVgYK