2016-11-03 5 views
0

Wie kann ich es horizontal scrollen lassen? HTML Wie kann ich es horizontal scrollen lassen?

Text

   <a href="html"><div id="right" class="box"> 
       <p>text</P> 
      </div></a> 

CSS

#big{ 
    background-color: red; 
    width: 300px; 
    height: 250px; 
    border: thin solid black; 
    overflow-x: show; 
    overflow-y: hidden; 

} }

.box { 
text-align: center; 

}

+0

Sie, was erarbeiten können Möchtest du ? – Rohit

+0

Scroll was? Ich meine, was willst du scrollen? –

+2

Wo ist # big in Ihrem HTML? – GvM

Antwort

0

Als erstes deklarieren Sie einen anderen ID-Namen im CSS- und HTML-DOM-Element, achten Sie darauf.

Zweitens gibt es keine solche Show ist Eigentum zu überlaufen, hier zu überprüfen: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

HTML

<a href="html"> 
    <div id="right" class="box"> 
    <p>text</p> <p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> 
    </div> 
</a> 

CSS

#right{ 
    background-color: red; 
    width: 3200px; 
    height: 250px; 
    background: red; 
    border: thin solid black; 
    overflow-y: scroll; 
} 

.box { 
text-align: center; 
} 

https://jsfiddle.net/13jh7gjb/2/

Ich hoffe, es hilft, Entferne einfach die Farbe des Hintergrundes, ich habe hinzugefügt, um das div für Sie zu markieren ..

+1

das ist vertikale scroll, OP will horizontal – GvM

+0

@GvM Danke, bereits korrigiert. –

0

Fügen Sie diese folgenden CSS-Codes zu Ihrem Container.

Überlauf-x: Scroll;

Überlauf-y: versteckt;

0

Wenn ich Ihre Anfrage zu verstehen, vielleicht werden Sie Ihre Antwort in diesem Beitrag finden:

Hier die StackOverflow Post, hier den Vorschlag JSFiddle

ul { 
 
    width: 160px; 
 
    display: block; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    } 
 
li { 
 
    width: 80px; 
 
    display: inline-block; 
 
    }
<div> 
 
    <ul> 
 
    <li>one</li><li>two</li><li>three</li><li>four</li> 
 
    </ul> 
 
</div>

+0

Danke, es funktioniert und das, was ich gesucht habe – noooooooo

Verwandte Themen