CSS div 요소 - 가로 스크롤 막대만 표시하는 방법?

CSS div 요소 - 가로 스크롤 막대만 표시하는 방법?

나는 디브 컨테이너를 가지고 있으며, 그 스타일을 다음과 같이 정의했습니다.

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

이렇게 하면 이 div에 포함된 테이블을 채우면 가로 및 세로 스크롤 막대가 자동으로 제공됩니다.저는 그냥 가로 스크롤 막대만 자동으로 나타나길 원합니다.테이블의 높이를 프로그래밍 방식으로 수정하겠습니다.

이거 어떻게 해요?

필요할 정도로 콘텐츠를 크게 만들지 않는 한 가로 스크롤 바와 세로 스크롤 바를 모두 얻어서는 안 됩니다.

그러나 일반적으로 IE에서는 버그로 인해 수행합니다.다른 브라우저(Firefox 등)에서 확인하여 실제로는 IE만 실행하고 있는지 확인합니다.

IE6-7(다른 브라우저 중에서도)은 스크롤 바를 독립적으로 설정하기 위해 제안된 CSS3 확장을 지원하며, 이를 사용하여 세로 스크롤 바를 억제할 수 있습니다.

overflow: auto;
overflow-y: hidden;

IE8에 대해서도 다음을 추가해야 할 수 있습니다.

-ms-overflow-y: hidden;

마이크로소프트가 IE8 Standards Mode에서 CR 이전의 모든 속성을 자신의 '-ms' 상자로 옮기겠다고 위협하고 있기 때문입니다. (항상 그런 방식이었다면 그럴 만도 했지만, 지금은 오히려 모두에게 불편이 되고 있습니다.)

반면 IE8이 버그를 수정했을 가능성은 전적으로 있습니다.

나는 또한 추가해야 했습니다.white-space: nowrap;스타일에 맞게, 그렇지 않으면 요소가 스크롤 기능을 제거하는 영역으로 압축됩니다.

이 솔루션은 파더 디브에 대해 높이/폭 지정이 없으므로 윈도우 크기 조정에 대응할 수 있으며 필요한 경우 수평 스크롤 막대가 가장 유용합니다.

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

데모 보기

두 가지를 모두 표시하는 방법:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

X축 숨기기:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

Y축 숨기기:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

당신도 만들수 있습니다.overflow: auto최대 고정 높이와 너비를 제공합니다. 텍스트가 넘쳐흐르면 필요한 스크롤 바만 표시됩니다.

CSS 속성을 사용합니다 : 1)"overflow-x: auto"; 2) "overflow-y: hidden"; 3) "white-space: nowrap";

용기 구성요소와 내부 DIVS 구성요소 모두에 대해 Width를 설정하는 것을 잊지 마십시오."white-space : nowrap" 속성을 사용하면 내부 DIVS가 다른 라인에 떨어지지 않습니다.

다음 HTML을 고려하면 다음과 같습니다.

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

수평 스크롤만 가지려면 다음 CSS를 사용합니다.

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

Fiddle: https://jsfiddle.net/qrjh93x8/ (위 코드로 작동하지 않음)

다음을 사용합니다.

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }

CSS3는overflow-x재산을 소유하고 있지만, 그것에 대한 큰 지원을 기대하지 않습니다.CSS2에서 당신이 할 수 있는 모든 것은 일반적인 것입니다.scroll 당신의일을 .widths그리고.heights그들을 망치지 않기 위해.

우리는 시작해야 합니다.overflow: autoCSS3 브라우저를 지원하지 않는 작업에 사용하지 않는 스크롤 바를 숨깁니다.이 CSS 오버플로를 보세요; XME.im

언급URL : https://stackoverflow.com/questions/258372/css-div-element-how-to-show-horizontal-scroll-bars-only