在CSS中水平滾動時溢出-x

在Web應用程序中，我有一些面板。在該面板中，我有一些標籤，我將通過json檢索，因此我不會知道確切的數字。我想添加一個水平滾動時，這些標籤溢出-x在他們的div。我已經使用white-space: nowrap和overflow: auto來完成，但標籤顯示向下移動。它們不再與面板中的標題和圖標對齊。我無法調整它們。在CSS中水平滾動時溢出-x

這是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

來源

2016-01-18 panagulis72