CSS div element - wie werden nur horizontale Bildlaufleisten angezeigt?

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

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

Dies gibt mir automatisch sowohl horizontale als auch vertikale Bildlaufleisten, sobald ich meine Tabelle auffülle, die in diesem Div enthalten ist. Ich möchte nur, dass nur horizontale Bildlaufleisten automatisch angezeigt werden. Ich werde die Höhe der Tabelle programmgesteuert ändern.

Wie mache ich das?

Sie sollten keine horizontalen und vertikalen Bildlaufleisten erhalten, es sei denn, Sie machen den Inhalt groß genug, um sie zu benötigen.

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

IE6-7 (unter anderen Browsern) unterstützt die vorgeschlagene CSS3-Erweiterung zum unabhängigen Festlegen von Bildlaufleisten, mit der Sie die vertikale Bildlaufleiste unterdrücken können:

overflow: auto;
overflow-y: hidden;

Möglicherweise müssen Sie auch für IE8 hinzufügen:

-ms-overflow-y: hidden;

Microsoft droht, alle Eigenschaften vor dem CR-Standard im IE8-Standardmodus in ein eigenes Feld "-ms" zu verschieben. (Dies hätte Sinn gemacht, wenn sie es immer so gemacht hätten, ist aber jetzt eher eine Unannehmlichkeit für alle.)

Andererseits ist es durchaus möglich, dass IE8 den Fehler trotzdem behoben hat.

Ich musste auch white-space: nowrap;den Stil erweitern, sonst würden Elemente in den Bereich eingefügt, in den wir nicht mehr scrollen können.

Diese Lösung ist ohne Höhe / Breite - Spezifikation für den Vater div so wird es sein , als Reaktion auf Änderungen der Fenstergröße und nützlichsten Ursache horizontale Scrollbalken erscheinen nur , wenn nötig.

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

Schauen Sie sich DEMO an

Um beides zu zeigen:

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

X-Achse ausblenden:

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

Y-Achse ausblenden:

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

Sie können es auch erstellen overflow: autound auf diese Weise eine maximale feste Höhe und Breite festlegen. Wenn der Text oder was auch immer darin überläuft, wird nur die erforderliche Bildlaufleiste angezeigt

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

Vergessen Sie nicht, eine Breite sowohl für den Container als auch für die inneren DIVS-Komponenten festzulegen. Die Eigenschaft "white-space: nowrap" ermöglicht es dem inneren DIVS, nicht in eine andere Zeile zu fallen.

Unter Berücksichtigung des folgenden HTML:

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

Ich verwende das folgende CSS, um nur einen horizontalen Bildlauf durchzuführen:

.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 */
}

Geige: https://jsfiddle.net/qrjh93x8/ (funktioniert nicht mit dem obigen Code)

Verwenden Sie Folgendes

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

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

CSS3 hat die overflow-xEigenschaft, aber ich würde keine große Unterstützung dafür erwarten. In CSS2 alles , was Sie tun können , eine allgemeine gesetzte scrollPolitik und arbeiten Sie widthsund heightsnicht zu verwirren sie.

Wir sollten overflow: autoeine Bildlaufleiste aktivieren und ausblenden, die wir nicht für die Arbeit an nicht unterstützten CSS3-Browsern verwenden. Sehen Sie sich diesen CSS-Überlauf an. XME.im