LI 요소에서 수평 스크롤 막대를 표시하고 수평 오버 플로우를 수행합니다.

Question

다음과 같은 CSS 및 HTML이 있습니다. .tab을 # tab-container의 탭 요소로 바꾸는 자바 스크립트 코드가 있습니다. .tab의 내용이 너비/높이를 초과하면 # tab-container의 너비와 높이가 고정되어 있으므로이 중 하나가 숨겨 지거나 오버플로됩니다. UL의 경우 오버플로하고 div.tab 내에 스크롤 막대가 있어야합니다. 수평 스크롤바 만 나타나야합니다. 아래 코드를 시도했지만 몇 가지 이유로 세로로 스크롤 할 수 있습니다 (LI는 너비 제한을 채운 다음 더 많은 행이 나타납니다 ... 한 행 + 가로 스크롤 만 필요함). 나는 정말로 두 개의 DIV를 변경할 수 없다고 생각한다. 그렇지 않으면 탭이 깨진다. .tab 레이어 내에 솔루션이 필요합니다.

되는 HTML :

<div id="tab-container"> 
    <div class="tab"> 
     <ul> 
      <li><img src="img01.png" width="96" height="96" /></li> 
      <li><img src="img02.png" width="96" height="96" /></li> 
      <li><img src="img03.png" width="96" height="96" /></li> 
      <li><img src="img04.png" width="96" height="96" /></li> 
     </ul> 
</div> 

는 CSS :

#tab-container { width: 500px; height: 200px; position: relative; overflow: hidden; } 
.tab { position: relative; overflow: hidden;} 
#tab-container .tab ul { position: absolute; width: auto; display: block; overflow: scroll; } 
#tab-container .tab ul li { display: inline-block; position: relative; } 

Answer 1

변경

.tab { 
    overflow: hidden; 
} 

에

.tab { 
    overflow-x: scroll; /* or auto, if you don't want the scroll bar visible all of the time. */ 
    overflow-y: hidden; 
} 

물건이 여전히 포장되어있는 것으로 확인되면 div.tabs에 white-space: nowrap을 추가하거나 <l>을 추가해야 할 수 있습니다.

또한 울의 position: absolute은 사용자가 원하는 것을 방해 할 가능성이 큽니다. position: absolute은 요소 흐름을 문서에서 제외하므로 원하는 방식으로 동작하지 않을 수 있습니다. 오작동하는 것으로 확인되면 position: relative으로 변경하십시오.