Горизонтальная прокрутка в CSS при переполнении-x

Question

В веб-приложении у меня есть панель. На этой панели у меня есть несколько меток, которые я собираюсь получить json, поэтому я не буду знать точный номер. Я бы хотел добавить горизонтальную прокрутку, когда эти метки переполняют-x в своем div. Я сделал это, используя white-space: nowrap и overflow: auto, но затем метки отображаются сдвинутыми вниз. Они больше не совпадают с названием и значком на панели. И я не могу их выровнять.

Это HTML код:

  <nav id="menu" class="nav">     
       <ul> 
        <li> 
         <a href="#"> 
          <span class="icon"> 
           <i aria-hidden="true" class="icon-home"></i> 
          </span> 
          <span>Client 1</span> 
          <div class="commesse"> 
           <ul> 
            <li>Matr 23</li> 
            <li>Matr 78</li> 
            <li>Matr 1351</li> 
            <li>Matr 63</li> 
            <li>Matr 81</li> 
           </ul> 
          </div> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="icon"> 
           <i aria-hidden="true" class="icon-services"></i> 
          </span> 
          <span>Client 2</span> 
          <div class="commesse"> 
           <ul> 
            <li>Matr 1235</li> 
            <li>Matr 61</li> 
            <li>Matr 72</li> 
            <li>Matr 42</li> 
            <li>Matr 771</li> 
            <li>Matr 671,b</li> 
            <li>Matr 217.a</li> 
            <li>Matr 2754</li> 
            <li>Matr 2</li> 
            <li>Matr 887</li> 
           </ul> 
          </div> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="icon"> 
           <i aria-hidden="true" class="icon-portfolio"></i> 
          </span> 
          <span>Client 3</span> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="icon"> 
           <i aria-hidden="true" class="icon-blog"></i> 
          </span> 
          <span>Client 4</span> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="icon"> 
           <i aria-hidden="true" class="icon-team"></i> 
          </span> 
          <span>Client 5</span> 
         </a> 
        </li> 
        <li> 
         <a href="#"> 
          <span class="icon"> 
           <i aria-hidden="true" class="icon-contact"></i> 
          </span> 
          <span>Client 6</span> 
         </a> 
        </li> 

       </ul> 
      </nav> 

И это CSS относительно указанного HTML:

.nav ul { 
max-width: 1240px; 
margin: 0; 
padding: 0; 
list-style: none; 
font-size: 1.5em; 
font-weight: 300; 
max-height: 388px; 
} 

.nav li { 
display: block; 
float: none; 
width: 100%; 
height: 164px; 
border: 2px solid rgba(255,255,255,0.1); 
margin-bottom: 30px; 
overflow: auto; 
} 

.nav li i { 
display: inline-block; 
padding: 27% 28%; 
border: 4px solid transparent; 
border-radius: 50%; 
font-size: 1.5em; 
background: rgba(255,255,255,0.1); 
} 


.nav li span { 
display: block; 
text-align: left; 
margin-right: 11px; 
} 

.nav a { 
display: block; 
color: rgba(249, 249, 249, .9); 
text-decoration: none; 
padding: 0.8em; 
-webkit-transition: color .5s, background .5s, height .5s; 
-moz-transition: color .5s, background .5s, height .5s; 
-o-transition: color .5s, background .5s, height .5s; 
-ms-transition: color .5s, background .5s, height .5s; 
transition: color .5s, background .5s, height .5s; 
} 

.nav li span, 
.nav li span.icon { 
display: inline-block; 
} 

.nav li .icon + span { 
font-size: 1.3em; 
} 

.icon + span { 
position: relative; 
top: -0.1em; 
} 

.icon { 
padding-top: .8em; 
} 

.commesse, .commesse ul { 
display: inline; 
} 

.commesse ul { 
white-space: nowrap; 

} 

.commesse ul li { 
display: inline; 
} 

А вот ПОЛНЫЙ КОД: enter link description here

Answer 1

Просто удалите white-space: nowrap; от .commesse ul и дать ему .nav a

Updated Plunker