찾다

 >  Q&A  >  본문

선택 필드 및 옵션 스타일 지정

옵션이 많은 다중 선택 필드가 있는데 긴 항목 목록을 표시하는 대신 작은 덩어리로 표시하고 싶습니다. "options"를 "display: inline-block"으로 설정하면 이 작업을 수행할 수 있지만 옵션이 컨테이너 경계에 도달하면 두 번째 줄로 들어가지 않고 컨테이너 뒤에 숨겨지는 문제가 있습니다.

여기서 볼 수 있듯이 마지막 항목을 잘라내고 다음 항목은 모두 보이지 않습니다.

으아악

옵션을 컨테이너 뒤에 전달하는 대신 두 번째 줄에 전달하는 방법이 있나요?

P粉924915787P粉924915787489일 전474

모든 응답(2)나는 대답할 것이다

  • P粉545956597

    P粉5459565972023-09-09 09:13:15

    컨테이너에 스타일을 지정하면 display: flexflex-wrap:wrap; 컨테이너 너비에 도달하면 옵션이 자동으로 다음 줄 제한으로 줄바꿈됩니다.

    업데이트된 CSS 코드는 다음과 같습니다.

    으아악

    회신하다
    0
  • P粉226667290

    P粉2266672902023-09-09 00:25:00

    select 요소로는 이 작업을 수행할 수 없는 것 같습니다. 필드 구조를 "select>options"에서 "ul>li>checkbox" 로 변경하여 상자와 각 li li 스타일을 원하는 대로 지정할 수 있었습니다. "appearence: none"을 사용하여 확인란을 숨긴 후 결과는 선택한 것과 동일합니다.

    회신하다
    0
  • 취소회신하다