How can I make it to scroll Horizontally?

Question

How can I make it to scroll Horizontally? HTML

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;

}

Answer 1

First of all, you are declaring different ID name in the css and html DOM element, pay attention with that.

Second, there's no such value show to overflow property, check here: 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/

I hope it helps, just remove the color of the background, I`ve added to highlight the div for you..

Answer 2

Add these following CSS codes to your container.

overflow-x: scroll;

overflow-y: hidden;

Answer 3

If I understand your request, maybe you will find your answer in this post :

Here the StackOverflow post, here the suggestion 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>