Div dengan pengguliran horizontal saja

89

Saya memiliki DIV lebar tetap yang berisi tabel dengan banyak kolom, dan perlu mengizinkan pengguna untuk menggulir tabel secara horizontal di dalam DIV.

Ini perlu bekerja hanya pada IE6 dan IE7 (aplikasi klien internal).

Pekerjaan berikut di IE7:

overflow-x: scroll;

Adakah yang bisa membantu dengan solusi yang berfungsi di IE6 juga?

html css

— Richard Ev
sumber

Properti overflow-x seharusnya bekerja dengan baik di IE6; Anda mungkin memiliki faktor yang memperumit. Dapatkah Anda memposting kasus uji yang menunjukkan masalah tersebut?

— Ben Blank

Sepertinya masalah saya ada di tempat lain - DIV saya yang berisi meluap ke penampungnya.

— Richard Ev

196

Solusinya cukup mudah. Untuk memastikan bahwa kami tidak memengaruhi lebar sel di tabel, kami akan menonaktifkan spasi . Untuk memastikan kami mendapatkan bilah gulir horizontal, kami akan mengaktifkan overflow-x . Dan itu cukup banyak:

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

Anda dapat melihat hasil akhirnya di sini , atau dalam animasi di bawah ini. Jika tabel menentukan tinggi penampung Anda, Anda tidak perlu menyetel secara eksplisit overflow-yke hidden. Tapi pahami itu juga merupakan pilihan.

— Sampson
sumber

4

Saya merindukan white-space: nowrap;. Bekerja seperti pesona!

— AndreFeijo

4

Jika sebuah gambar memiliki makna seribu kata, gif bernilai sejuta.

— HoldOffHunger

Anda juaranya, teman saya.

— Spencer Williams

Bagaimana jika saya membutuhkan scroll vertikal individu juga di setiap kolom dan tidak ada scroll vertikal di main-container? Saya mencoba melakukannya dengan white-space: nowrap;di wadah utama dan pengaturan heightdan overflow-y: scrollke kolom individu, tetapi itu tidak berfungsi.

— Sachin

ruang-putih: nowrap; Saya selalu jatuh dalam hal itu! terima kasih jawaban yang luar biasa!

— talsibony

68

Saya tidak bisa mendapatkan jawaban yang dipilih untuk bekerja tetapi setelah sedikit penelitian , saya menemukan bahwa div pengguliran horizontal harus ada white-space: nowrapdi css.

Berikut kode kerja lengkap:

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

— WKS
sumber

2

Saran "white-space: nowrap" di sini tampaknya telah dicampur menjadi jawaban yang benar. 1 untuk meningkatkan jawaban yang diterima.

— HoldOffHunger

21

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

EDIT:

Ini bekerja untuk saya:

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

— Diodeus - James MacFarlane
sumber

18

Untuk scroll horizontal, perhatikan kedua properti ini:

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

Lihat tautan yang berfungsi: klik saya

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

— ankitd
sumber

5

coba ini:

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

Ruang putih: nowrap; properti jangan biarkan Anda membungkus teks. Lihat saja di sini untuk contoh: https://codepen.io/oezkany/pen/YoVgYK

— oezkany
sumber