HTML에 표시되지 않도록 div 가로 스크롤 막대를 설정하는 방법

WBOY
풀어 주다: 2022-01-18 14:50:44
원래의
4441명이 탐색했습니다.

HTML에서는 스타일 및 "overflow-x" 속성을 사용하여 스크롤 막대를 가로로 이동하고 표시하지 않도록 div를 설정할 수 있습니다. 속성 값이 "hidden"으로 설정되면 가로 스크롤 메커니즘이 작동합니다. 구문은 "

"입니다.

HTML에 표시되지 않도록 div 가로 스크롤 막대를 설정하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, Dell G3 컴퓨터.

html div 가로 스크롤 막대가 표시되지 않도록 설정하는 방법

overflow-x 속성은 요소의 콘텐츠 영역을 초과하는 경우 왼쪽/오른쪽 가장자리 콘텐츠를 자를지 여부를 지정합니다.

구문은

overflow-x: visible|hidden|scroll|auto|no-display|no-content;
로그인 후 복사

매개변수는 다음과 같이 표현됩니다.

HTML에 표시되지 않도록 div 가로 스크롤 막대를 설정하는 방법

예제는 다음과 같습니다.

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-y:hidden;
}
</style>
</head>
<body>
<div style="overflow-x:hidden;"><p style="width:140px">
In my younger and more vulnerable years my father gave me some advice that I&#39;ve been turning over in my mind ever since.
&#39;Whenever you feel like criticizing anyone,&#39; he told me, &#39;just remember that all the people in this world haven&#39;t had the advantages that you&#39;ve had.&#39; 
</p></div>
<p>Overflow-x指定是否要剪辑的左/右边缘的内容.</p>
<p>Overflow-y指定是否要剪辑的顶部/底部边缘的内容</p>
</body>
</html>
로그인 후 복사

style="overflow-x:hidden;" 스타일이 div에 추가되지 않은 경우 요소의 경우 출력 결과는 다음과 같습니다.

HTML에 표시되지 않도록 div 가로 스크롤 막대를 설정하는 방법

위 예제에서 이 스타일을 추가하면 출력 결과는 다음과 같습니다.

HTML에 표시되지 않도록 div 가로 스크롤 막대를 설정하는 방법

추천 튜토리얼: "html 비디오 튜토리얼"

위 내용은 HTML에 표시되지 않도록 div 가로 스크롤 막대를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿