CSS div-Element - wie werden nur horizontale Bildlaufleisten angezeigt?

Question

Ich habe einen div-Container und habe seinen Stil wie folgt definiert:

div#tbl-container 
{ 
    width: 600px; 
    overflow: auto;  
    scrollbar-base-color:#ffeaff 
} 

Diese mir Bars sowohl horizontale als auch vertikale Scroll gibt automatisch, sobald ich meinen Tisch bevölkern, die durch dieses div enthalten ist. Ich möchte nur horizontale Bildlaufleisten automatisch angezeigt werden. Ich werde die Höhe der Tabelle programmgesteuert ändern.

Wie mache ich das?

Answer 1

Sie sollten nicht horizontale und vertikale Bildlaufleisten erhalten, wenn Sie den Inhalt nicht groß genug machen, um sie zu benötigen.

Allerdings tun Sie normalerweise in IE aufgrund eines Fehlers. Überprüfen Sie in anderen Browsern (Firefox etc.), ob es tatsächlich nur IE ist, der es tut.

IE6-7 (unter anderen Browsern) unterstützt die vorgeschlagene CSS3 Erweiterung Scroll unabhängig einstellen, die Sie die vertikale Bildlaufleiste zu unterdrücken verwenden:

overflow: auto; 
overflow-y: hidden; 

Sie auch für IE8 hinzufügen müssen:

wie Microsoft droht, alle Pre-CR-Standard-Eigenschaften in ihre eigene "-ms" -Box im IE8-Standards-Modus zu verschieben. (Das hätte Sinn gemacht, wenn sie es immer so gemacht hätten, ist aber jetzt eher eine Unannehmlichkeit für alle.)

Auf der anderen Seite ist es durchaus möglich, dass IE8 den Fehler sowieso behoben hat.

Answer 2

CSS3 hat die overflow-x Eigenschaft, aber ich würde keine große Unterstützung dafür erwarten. In CSS2 alles, was Sie tun können, ist eine allgemeine scroll Richtlinie und arbeiten Sie Ihre widths und heights, um sie nicht zu versauen.

Answer 3

Sie können es auch overflow: auto machen und eine maximale feste Höhe geben und auf diese Weise die Breite, wenn der Text oder was auch immer dort ist, überläuft es wird nur die erforderliche Scrollbar

Answer 4

Um zu zeigen, beide zeigen:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">  </div> 

ausblenden X-Achse:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">  </div> 

ausblenden Y-Achse:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">  </div> 

Answer 5

Ich musste auch white-space: nowrap; zum Stil hinzufügen, sonst würden Elemente in den Bereich, den wir entfernen die Fähigkeit zu scrollen, um nach unten zu wickeln.

Answer 6

Wir sollten auf overflow: auto setzen und eine Bildlaufleiste ausblenden, die wir nicht für die Arbeit an nicht unterstützenden CSS3-Browser verwenden. Schauen Sie sich das CSS Overflow; XME.im

Answer 7

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;} 


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;} 
.box-author-txt ul li{ list-style-type:none; width:140px; } 

Answer 8

Verwenden Sie den folgenden

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;"> 
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" > 

Answer 9

Diese Lösung ist ohne Höhe/Breite-Spezifikation für den Vater div so wird es reaktions auf Fenstergröße und nützlichsten Ursache sein horizontale Bildlaufleisten erscheinen nur bei Bedarf.

.container{ 
    padding:20px; 
    border:dotted 1px; 
    white-space:nowrap; 
    overflow-x:auto; 
} 

.box{ 
    width:100px; 
    height:180px; 
    background-color: red; 
    margin:10px; 
    display:inline-block 
} 

Werfen Sie einen Blick auf DEMO

Answer 10

ich die CSS-Eigenschaften: 1) "overflow-x: auto"; 2) "overflow-y: hidden"; 3) "white-space: nowrap";

Vergessen Sie nicht, eine Breite festzulegen, sowohl für den Container als auch für die inneren DIVS-Komponenten. Die Eigenschaft "white-space: nowrap" erlaubt es den inneren DIVS nicht auf eine andere Linie zu fallen.

Betrachtet man die folgende HTML:

<div class="container"> 
    <div class="inner-1"></div> 
    <div class="inner-2"></div> 
    <div class="inner-3"></div> 
</div> 

Ich benutze das folgende CSS nur eine horizontale Scroll zu haben:

.container { 
    height: 80px; 
    width: 600px; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 
.inner-1,.inner-2,.inner-3 { 
    height: 60px; 
    max-width: 250px; 
display: inline-block; /* this should fix it */ 
} 

Fiddle: https://jsfiddle.net/qrjh93x8/ (nicht mit dem obigen Code arbeiten)