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

Antworten:

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.

Geben Sie hier die Bildbeschreibung ein

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