[html] 가로 스크롤 만있는 Div

Program / 글쓴이

많은 열이있는 테이블을 포함하는 고정 너비 DIV가 있으며 사용자가 DIV 내에서 테이블을 가로로 스크롤 할 수 있어야합니다.

이것은 IE6 및 IE7에서만 작동해야합니다 (내부 클라이언트 응용 프로그램).

다음은 IE7에서 작동합니다.

overflow-x: scroll;

누구든지 IE6에서도 작동하는 솔루션을 도울 수 있습니까?

답변

해결책은 상당히 간단합니다. 테이블의 셀 너비에 영향을 미치지 않도록 공백 을 해제 합니다 . 수평 스크롤 막대를 얻기 위해 overflow-x를 켭니다 . 그리고 그게 다입니다.

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

여기 또는 아래 애니메이션에서 최종 결과를 볼 수 있습니다 . 테이블이 컨테이너의 높이를 결정하는 경우 명시 적으로로 설정하지 않아도 overflow-y됩니다 hidden. 그러나 그것도 선택 사항임을 이해하십시오.

여기에 이미지 설명 입력

답변

선택한 답변을 얻을 수 없었지만 약간의 조사 끝에 수평 스크롤 div가 white-space: nowrapCSS에 있어야 함을 발견했습니다 .

다음은 완전한 작업 코드입니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>

답변

overflow-x: scroll;
overflow-y: hidden;

편집하다:

나를 위해 작동합니다.

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>

답변

가로 스크롤의 경우 다음 두 속성을 염두에 두십시오.

overflow-x:scroll;
white-space: nowrap;

작업 링크보기 : 나를 클릭하십시오

HTML

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}

답변

이 시도:

HTML :

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS :

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

공백 : nowrap; 속성은 텍스트 줄 바꿈을 허용하지 않습니다. 예를 보려면 여기를 참조하십시오 : https://codepen.io/oezkany/pen/YoVgYK

답변