탐색 모음에서 목록 항목의 클릭 가능한 영역을 확장하는 방법은 무엇입니까?

탐색 막대에서 목록 항목의 클릭 가능 영역 확장

탐색 막대에는 패딩된 목록 항목이 있는 순서가 지정되지 않은 목록이 있는 경우가 많습니다. 그러나 링크 활성화를 위해 클릭할 수 있는 영역은 일반적으로 텍스트 자체로 제한됩니다. 사용자 경험을 향상시키기 위해 전체 목록 항목을 클릭 가능하게 만들 수 있습니다.

해결책:

요소. 대신 다음 CSS를 각 목록 항목 내의 태그:

a {
  display: inline-block;
  padding: [desired padding values];
}

이렇게 하면 원하는 패딩과 레이아웃을 유지하면서 클릭 가능한 영역이 전체 목록 항목으로 확장됩니다.

예:

주어진 HTML과 CSS를 고려하세요.

<code class="html"><div id="nav">
  <img src="/static/imghwm/default1.png" data-src="/images/renderedicon.png" class="lazy" alt="Icon"    style="max-width:90%"  style="max-width:90%">
  <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 id="Heading">Heading</h2>
</div></code>

<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;
}

#nav li {
  display: block;
  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>

display: inline-block; 앵커 태그에 패딩 속성을 추가하면 각 목록 항목의 클릭 가능한 영역이 원래 레이아웃에 영향을 주지 않고 항목의 전체 너비로 확장됩니다.

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