Jquery 대화 상자 가로 스크롤 막대 문제

Question

모든 하위 div를 가로 스크롤 막대에 맞춰 정렬해야합니다. 그러나 jsfiddle (http://jsfiddle.net/PrZNr/95/) 에서 자식 div는 왼쪽 정렬되지 않으며 부모 div 너비를 늘리면 왼쪽 정렬됩니다.

<div id="items" style="width:700px;height:500;overflow:scroll"> 
    <div style="float:left;"> 
    <ul class="sort"> 
     <li >Item A1sdfsdfsdfsdfsdfsdfyynynynyn</li> 
     <li>Item A2</li> 
     <li>Item A3</li> 
     <li>Item A4</li> 
     <li>Item A5</li> 
     <li>Item A6</li> 
     <li>Item A7</li> 
     <li>Item A8</li> 
     <li>Item A9</li> 
     <li>Item A10</li> 
    </ul> 
</div> 
    <div style="float:left;"> 
    <ul class="sort"> 
     <li >Item A1sdfsdfsdfsdfsdfsdfyynynynyn</li> 
     <li>Item A2</li> 
     <li>Item A3</li> 
     <li>Item A4</li> 
     <li>Item A5</li> 
     <li>Item A6</li> 
     <li>Item A7</li> 
     <li>Item A8</li> 
     <li>Item A9</li> 
     <li>Item A10</li> 
    </ul> 
</div> 
</div> 

는하지만 난 부모 div의 폭은 100 픽셀이어야하며 모든 자식 DIV가 포장하는 것 맞추고 가로 스크롤 막대가 대화가 있어야한다 창을

Answer 1

하나의 가능성을 팝업 왼쪽해야합니다 다른 div에있는 두 개의 하위 div (너비는 적어도 두 자식의 너비가 함께 있음). 이렇게하면 요소가 서로 옆에 수평으로 떠있을 수있는 충분한 공간이 부여됩니다. http://jsfiddle.net/E8f86/

다음

<div id="items" style="width:100px;height:500;overflow-x:scroll"> 
<div style="width:700px"> 
<div style="float:left;background:#efefef"> 
<ul class="sort"> 
    <li >Item A1sdfsdfsdfsdfsdfsdfyynynynyn</li> 
    <li>Item A2</li> 
    <li>Item A3</li> 
    <li>Item A4</li> 
    <li>Item A5</li> 
    <li>Item A6</li> 
    <li>Item A7</li> 
    <li>Item A8</li> 
    <li>Item A9</li> 
    <li>Item A10</li> 
</ul> 
</div> 
<div style="float:left;background:#ff00ff"> 
<ul class="sort"> 
    <li >Item A1sdfsdfsdfsdfsdfsdfyynynynyn</li> 
    <li>Item A2</li> 
    <li>Item A3</li> 
    <li>Item A4</li> 
    <li>Item A5</li> 
    <li>Item A6</li> 
    <li>Item A7</li> 
    <li>Item A8</li> 
    <li>Item A9</li> 
    <li>Item A10</li> 
</ul> 
</div> 
</div> 
</div> 

Answer 2

작업입니다 데모 나 외부 DIV 내부 인라인 요소의 컨테이너로 다른 사업부를 추가 한http://jsfiddle.net/PRNBg/

• :

  은 당신의 나의 수정 바이올린을 참조하십시오 (데모 참조)

• remove 스타일 속성 id = "item"div
짧고 명확 :

• 는 CSS를

  #items{ 
      width:700px; 
      overflow-x:scroll; 
      white-space: nowrap; 
      background:#eee; 
  } 
  #items div, ul 
  { 
      display:inline-block;  
      float:left; 
  }