탐색 모음 목록 항목을 완전히 클릭 가능하게 만드는 방법은 무엇입니까?

내비게이션 막대 목록 항목을 완전히 클릭 가능하게 만들기

순서가 지정되지 않은 목록을 사용하여 생성된 일반적인 가로 탐색 막대에서는 목록 항목의 아무 곳이나 클릭하면 커서가 링크 자체의 텍스트 내에 있는 경우에만 작업을 트리거할 가능성이 높습니다. 클릭 가능한 영역을 전체 목록 항목으로 확장하려면 HTML 및 CSS를 다음과 같이 수정하세요.

CSS:

<code class="css">#nav li a {
  display: inline-block;
  padding: 25px 10px;
}</code>

'li에서 패딩을 제거하여 ' 요소를 앵커 태그에 추가하면 이제 클릭 가능한 영역이 목록 항목의 전체 너비와 높이를 채울 정도로 확장됩니다.

HTML:

<code class="html"><div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div></code>

이제 사용자는 목록 항목 내의 아무 곳이나 클릭하여 해당 링크를 활성화할 수 있어 더욱 사용자 친화적인 탐색 모음이 제공됩니다.

위 내용은 탐색 모음 목록 항목을 완전히 클릭 가능하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!