JQuery Jscrollpane 인라인 HTML 목록이있는 가로 스크롤

Question

가로로만 스크롤 할 수있는 HTML 목록이있는 스크롤 창이 필요합니다. 아래 코드를 사용하면 목록 항목이 전체 행 다음에 서로 지워지고 스크롤 창은 세로로 만 이동합니다. 대신 인라인 블록 디스플레이를 사용하여 CSS에 whitespace:nowrap을 추가해야합니다 수레를 사용

<div class="scrolling-list"> 
<ul> 
<li> List item 1</li> 
<li> List item 2</li> 
<li> List item 3</li> 
<li> List item 4</li> 
<li> List item 5</li> 
</ul>  
</div> 

JS

<script type="text/javascript"> 
     $(function() 
     { 
      $('.scrolling-list').jScrollPane(); 
     }); 
</script> 

CSS

.scrolling-list{ 
height:auto; 
max-height:200px; 
width: 640px; 
} 
li{ 
float:left; 
width:200px;} 

Answer 1

당신이 그때 당신은 예를 들어, 모든 아이들의 전체 폭으로 UL의 폭을 설정하기 위해 자바 스크립트를 사용할 수에 대한 인라인 블록 접근 방식이 작동하지 않는 경우 예 :

<script type="text/javascript"> 
    $(function() 
    { 
     var list = $('.scrolling-list'); 
     list.find('ul').each(
      function() 
      { 
       var w = 0; 
       $(this).find('li').each(
        function() 
        { 
         w += $(this).outerWidth(); 
        } 
       ).css('width', w + 'px'); 
      } 
     ) 
     list.jScrollPane(); 
    }); 
</script> 

Answer 2

. 일부 IE 브라우저와 호환되지 않을 수 있습니다.

.scrolling-list { 
    height:auto; 
    max-height:200px; 
    width:640px; 
    white-space:nowrap; 
} 
.scrolling-list li { 
    display:inline-block; 
    width:200px; 
}