옵션이 많은 다중 선택 필드가 있는데 긴 항목 목록을 표시하는 대신 작은 덩어리로 표시하고 싶습니다. "options"를 "display: inline-block"으로 설정하면 이 작업을 수행할 수 있지만 옵션이 컨테이너 경계에 도달하면 두 번째 줄로 들어가지 않고 컨테이너 뒤에 숨겨지는 문제가 있습니다.
여기서 볼 수 있듯이 마지막 항목을 잘라내고 다음 항목은 모두 보이지 않습니다.
으아악옵션을 컨테이너 뒤에 전달하는 대신 두 번째 줄에 전달하는 방법이 있나요?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
컨테이너에 스타일을 지정하면
display: flex和flex-wrap:wrap;컨테이너 너비에 도달하면 옵션이 자동으로 다음 줄 제한으로 줄바꿈됩니다.업데이트된 CSS 코드는 다음과 같습니다.
으아악select 요소로는 이 작업을 수행할 수 없는 것 같습니다. 필드 구조를 "select>options"에서 "ul>li>checkbox" 로 변경하여 상자와 각
lili스타일을 원하는 대로 지정할 수 있었습니다. "appearence: none"을 사용하여 확인란을 숨긴 후 결과는 선택한 것과 동일합니다.