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

목록 영역 전체에서 클릭 가능한 탐색 항목 활성화

내비게이션 바를 디자인할 때 목록 영역 전체를 원하는 상황이 발생할 수 있습니다. 미적 매력을 높이기 위한 충분한 패딩에도 불구하고 목록 항목이 클릭 가능한 링크로 작동하도록 합니다. 이 가이드에서는 이 동작을 수행하는 방법을 설명합니다.

접근 방법

탐색 모음에서 클릭 가능한 목록 항목을 활성화하려면 다음 단계를 따르세요.

1. 목록 항목에서 패딩 제거:

   • 'li' 요소에 패딩을 추가하는 것을 삼가하세요. 목록 항목에 적용된 패딩은 클릭 가능한 영역을 텍스트로만 제한합니다.

2. 앵커 태그 강화:

   • 인라인 블록을 표시하도록 앵커 태그( 요소)를 수정합니다.

     #nav a {
       display: inline-block;
       padding: ...;
     }

   • 'li' 항목 대신 앵커 태그에 패딩을 적용하여 클릭 가능한 영역을 제어합니다.

사용

제공된 예에서 다음 수정 사항을 사용하면 목록 항목 영역 전체에서 클릭이 가능해집니다.

#nav li {
  padding: 0;
}

#nav a {
  display: inline-block;
  padding: 25px 10px;
}

예제 코드

<code class="css">#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
  padding:0;
}

#nav li {
  float: left;
}

#nav li:hover {
  background-color: #785442;
}

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

<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>
<div>
  <h2>Heading</h2>
</div></code>

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