Horizontaler Bildlauf Inhalt in fester Breite div

Question

Es ist die mobile Ansicht. Die Breite in der Verknüpfung Div ist 100%. Ich möchte den Inhalt dieses div horizontal scrollen, ohne die ganze Seite zu scrollen. Unten ist der HTML-Code.

  <div class="links"> 
      <ul> 
       <li>Home</li> 
       <li>Private Equity</li> 
       <li>Venture Capital</li> 
       <li>M&A</li> 
       <li>Markets</li> 
       <li>Industry</li> 
       <li>Economy</li> 
      </ul> 
      </div> 

und CSS

.links{ 
width: 100% 

    ul{ 
    padding:0px; 
    margin:0px; 

    @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; 

    &:last-child{ 
     border-right:0px; 
    } 
    } 
} 

Answer 1

Alles was Sie brauchen ein overflow-x: scroll auf div ist: https://jsfiddle.net/m5k5Lkm4/

Auch weiß ich nicht wissen, was Sie verwenden, um Ihren HTML-Code zu laden, aber wenn es sich um HTML-Code handelt, benötigen Sie das & in "M & A", um als HTML-Entität zu entkommen.

Answer 2

Sie in Ihrer Klasse hinzufügen können

.links { 
    overflow: auto; 
    overflow-y: hidden; 
    ....