side_scroll_html

by amindunited

HTML

<div class="wrapper clearfix">
    <ul class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

CSS

//.wrapper { height: 100px; overflow-y: hidden; overflow-x: scroll; }
.wrapper ul { list-style: none; margin: 0; padding: 0; }
.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
.wrapper ul { 
    height: 100px; 
    overflow-y: hidden; 
    overflow-x: auto; 
    display: block; 
    white-space: nowrap; 
    width: auto;
}

.wrapper ul li { 
    box-sizing: border-box;
    list-style: none; 
    height: 100px; 
    width: 80px; 
    background-color: rgba(127, 127, 127, .5);
    text-align: center;
    line-height: 100px;
    border: solid 1px #666666;
    display: inline-block;
}