amansoni211 amansoni211 - 1 year ago 54
CSS Question

Horizontal scroll content in fixed width div

It is the mobile view. the width in the link div is 100%. I want to horizontally scroll the content of this div without scrolling the whole page. below is the html code.

<div class="links">
<li>Private Equity</li>
<li>Venture Capital</li>

and CSS

width: 100%


@media only screen and (max-width : 480px){
white-space: nowrap;

ul li{
list-style-type: none;
display: inline-block;
padding:8px 30px;
text-transform: uppercase;
font-family: $roboto;
font-size: 20px;
font-weight: 300;
font-stretch: condensed;
line-height: 1;
border-right:1px solid #000;


Answer Source

All you need is an overflow-x: scroll on your div:

Also, I don't know what you're using to load your HTML, but if it's raw HTML, you'll need that & in "M&A" to be escaped as an HTML entity.