Div nur mit horizontalem Scrollen

88

Ich habe ein DIV mit fester Breite, das eine Tabelle mit vielen Spalten enthält, und muss dem Benutzer erlauben, die Tabelle innerhalb des DIV horizontal zu scrollen.

Dies muss nur auf IE6 und IE7 (interne Client-Anwendung) funktionieren.

Folgendes funktioniert in IE7:

overflow-x: scroll;

Kann jemand mit einer Lösung helfen, die auch in IE6 funktioniert?

html css

— Richard Ev
quelle

Die Eigenschaft overflow-x sollte in IE6 einwandfrei funktionieren. Möglicherweise haben Sie komplizierende Faktoren. Können Sie einen Testfall veröffentlichen, der das Problem aufweist?

— Ben Blank

Es sieht so aus, als ob mein Problem woanders liegt - mein enthaltener DIV läuft in seinen Container über.

— Richard Ev

186

Die Lösung ist ziemlich einfach. Um sicherzustellen, dass die Breite der Zellen in der Tabelle nicht beeinflusst wird, deaktivieren wir den Leerraum . Um sicherzustellen, dass wir eine horizontale Bildlaufleiste erhalten, aktivieren wir overflow-x . Und das war's auch schon:

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

Sie können das Endergebnis hier oder in der Animation unten sehen. Wenn die Tabelle , die die Höhe des Containers bestimmt, sollten Sie nicht explizit müssen gesetzt overflow-yzu hidden. Aber verstehe, dass dies auch eine Option ist.

— Sampson
quelle

3

Mir hat das gefehlt white-space: nowrap;. Klappt wunderbar!

— AndreFeijo

4

Wenn ein Bild mehr sagt als tausend Worte, ist ein GIF eine Million wert.

— HoldOffHunger

Du bist der Champion, mein Freund.

— Spencer Williams

Was ist, wenn ich in jeder Spalte auch einen einzelnen vertikalen Bildlauf und keinen vertikalen Bildlauf im Hauptcontainer benötige ? Ich versuche das mit dem white-space: nowrap;Hauptcontainer und der Einstellung heightund overflow-y: scrollmit einzelnen Spalten zu tun , aber es funktioniert nicht.

— Sachin

Leerraum: Nowrap; Ich falle immer hinein! danke tolle Antwort!

— Talsibony

68

Ich konnte die ausgewählte Antwort nicht zum Laufen bringen, aber nach ein wenig Recherche stellte ich fest, dass das horizontale Bildlauf-Div white-space: nowrapim CSS enthalten sein muss.

Hier ist der vollständige Arbeitscode:

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

2

Der Vorschlag von "Leerraum: Nowrap" hier scheint in die richtige Antwort eingemischt worden zu sein. +1 zur Verbesserung der akzeptierten Antwort.

— HoldOffHunger

21

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

BEARBEITEN:

Für mich geht das:

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

— Diodeus - James MacFarlane
quelle

17

Beachten Sie beim horizontalen Scrollen die beiden folgenden Eigenschaften:

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

Siehe Arbeitslink: Klicken Sie auf mich

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
quelle

3

Versuche dies:

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

Der Leerraum: Nowrap; Mit dieser Eigenschaft können Sie keinen Text umbrechen. Ein Beispiel finden Sie hier: https://codepen.io/oezkany/pen/YoVgYK

— oezkany
quelle