전체 탐색 모음 목록 항목을 링크로 클릭할 수 있게 만드는 방법은 무엇입니까?

전체 탐색 모음 목록 항목을 링크로 클릭 가능하게 만들기

요청에 따라 수평 탐색 모음은 순서가 지정되지 않은 목록을 사용하여 구성되었습니다. 각 목록 항목에는 충분한 패딩이 있습니다. 그러나 원하는 효과는 텍스트만이 아닌 전체 목록 항목 영역이 활성 링크로 기능한다는 것입니다. 이를 달성하는 방법은 다음과 같습니다.

각 목록 항목의 전체 영역을 클릭할 수 있게 하려면 CSS 코드를 다음과 같이 변경하세요.

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

앵커 태그에 인라인 블록을 적용하여(# nav a) 블록 요소처럼 동작하여 수직으로 정렬하면서 목록 항목의 너비를 차지합니다. 즉, 이전에 목록 항목에 적용했던 패딩(#nav li)을 이제 앵커 태그에 적용할 수 있습니다.

이 조정을 통해 패딩을 포함한 각 목록 항목의 전체 영역이 클릭 가능한 링크로 인식됩니다. 아래 코드 조각은 필요한 변경 사항을 보여줍니다.

<code class="css">#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  display: inline-block;
  padding: 25px 10px;
}</code>

목록 항목에서 패딩을 분리하면 전체 목록 항목을 클릭하여 관련 링크를 활성화할 수 있도록 하면서 시각적인 모양을 유지할 수 있습니다. 사용자 친화적이고 시각적으로 매력적인 탐색 경험을 제공합니다.

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