타일 레이아웃의 가로 스크롤 버튼
P粉823268006
2023-08-31 20:54:51
<p>다음과 같이 타일 레이아웃에서 수직으로 스크롤되는 버튼이 많이 있습니다.</p>
<p>
<pre class="brush:html;toolbar:false;"><style>
.타일버튼 {
너비:33.3%;
높이:100px;
배경색: 연한 파란색;
테두리: 단색 1px 회색;
공백: 정상;
마링: 0px;
}
</스타일>
<body style="여백: 0;">
<div style="너비:100%;높이:300px;배경색: 산호;오버플로-y: 스크롤;글꼴 크기:0px;">
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<button class="tile-button">제목</button>
<div>
</body></pre>
</p>
<p>이제 동일한 작업을 수행해야 하지만 가로 스크롤만 사용하면 됩니다.
누구든지 나를 도와줄 수 있나요?
정말 감사합니다</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
컨테이너 DIV에 'white-space:nowrap;' CSS 코드를 추가하세요.
으아악해결책을 찾았습니다: