HTML 선택 드롭다운 옵션의 너비를 제어하는 ​​방법은 무엇입니까?

HTML 선택 드롭다운 옵션에 대한 효과적인 너비 관리

드롭다운 너비가 화면 경계를 초과하는 경우 긴 옵션으로 선택 상자를 채우는 것이 문제가 됩니다. . 선택 상자의 너비를 수동으로 설정하면 드롭다운 메뉴의 너비를 제한하지 못하는 경우가 많습니다.

해결책은 선택 상자를 고정 너비 div 컨테이너 내에 캡슐화하는 것입니다. div의 너비와 선택 태그의 너비를 "auto"로 설정하면 대부분의 브라우저에는 div 내에 드롭다운이 포함됩니다. 그러나 클릭하면 드롭다운이 확장되어 전체 옵션이 표시됩니다.

HTML:

<code class="html"><div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div></code>

CSS:

<code class="css">div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto;
}</code>

이 방법은 가독성을 저하시키지 않으면서 드롭다운 너비를 효과적으로 관리합니다. div 컨테이너는 드롭다운의 초기 너비를 제한하는 반면, 선택 항목의 "자동" 너비는 클릭 시 원활한 확장을 허용합니다. Internet Explorer 호환성을 위해 포함된 CSS 수정 사항은 적절한 렌더링을 보장합니다.

위 내용은 HTML 선택 드롭다운 옵션의 너비를 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!