Yalnızca yatay kaydırmalı div

Question 1

Çok sayıda sütun içeren bir tablo içeren sabit genişlikte bir DIV'ye sahibim ve kullanıcının tabloyu DIV içinde yatay olarak kaydırmasına izin vermem gerekiyor.

Bunun yalnızca IE6 ve IE7'de çalışması gerekir (dahili istemci uygulaması).

Aşağıdaki IE7'de çalışır:

overflow-x: scroll;

IE6'da da çalışan bir çözüme kimse yardımcı olabilir mi?

Question 2

Çözüm oldukça basittir. Tablodaki hücrelerin genişliğini etkilemediğimizden emin olmak için beyaz boşluğu kapatacağız . Yatay bir kaydırma çubuğu elde ettiğimizden emin olmak için overflow-x'i açacağız . Ve hemen hemen hepsi bu:

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

Görebilirsiniz burada son sonucu veya aşağıdaki animasyonda. Tablo, konteynerinizin yüksekliğini belirliyorsa, bunu açıkça ayarlamanıza overflow-ygerek yoktur hidden. Ancak bunun da bir seçenek olduğunu anlayın.

Question 3

Seçilen cevabı işe yarayamadım, ancak biraz araştırma yaptıktan sonra , yatay kaydırma div'inin css'de olması gerektiğini buldum white-space: nowrap.

İşte tam çalışma kodu:

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

DÜZENLE:

Benim için çalışıyor:

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

Question 5

Yatay kaydırma için şu iki özelliği aklınızda bulundurun:

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

Çalışan bağlantıya bakın: beni tıklayın

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

bunu dene:

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

Beyaz boşluk: şimdi tuzak; özelliği, metni kaydırmanıza izin vermez. Örnek için buraya bakın: https://codepen.io/oezkany/pen/YoVgYK