Div chỉ với cuộn ngang

Question 1

Tôi có DIV chiều rộng cố định chứa một bảng có nhiều cột và cần cho phép người dùng cuộn bảng theo chiều ngang trong DIV.

Điều này chỉ cần hoạt động trên IE6 và IE7 (ứng dụng khách nội bộ).

Các hoạt động sau đây trong IE7:

overflow-x: scroll;

Bất cứ ai có thể giúp đỡ với một giải pháp hoạt động trong IE6?

Question 2

Giải pháp là khá đơn giản. Để đảm bảo rằng chúng tôi không ảnh hưởng đến chiều rộng của các ô trong bảng, chúng tôi sẽ tắt khoảng trắng . Để đảm bảo chúng ta nhận được thanh cuộn ngang, chúng ta sẽ bật tràn-x . Và đó là khá nhiều:

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

Bạn có thể xem kết quả cuối cùng ở đây hoặc trong hình động bên dưới. Nếu bảng xác định chiều cao của container của bạn, bạn không cần phải dứt khoát thiết lập overflow-yđể hidden. Nhưng hãy hiểu rằng đó cũng là một lựa chọn.

Question 3

Tôi không thể làm cho câu trả lời đã chọn hoạt động nhưng sau khi nghiên cứu một chút , tôi thấy rằng div cuộn ngang phải có white-space: nowraptrong css.

Đây là mã làm việc hoàn chỉnh:

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

BIÊN TẬP:

Nó hoạt động cho tôi:

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

Question 5

Đối với cuộn ngang, hãy ghi nhớ hai thuộc tính sau:

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

Xem liên kết làm việc: nhấp vào tôi

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

thử đi:

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

Khoảng trắng: nowrap; tài sản không cho phép bạn bọc văn bản. Chỉ cần xem ví dụ ở đây: https://codepen.io/oezkany/pen/YoVgYK