목록 항목의 전체 공간을 채우기 위해 앵커 태그를 늘리는 방법은 무엇입니까?

앵커 태그 스트레칭 솔루션

앵커 태그()가 목록 항목(

) 내의 전체 공간을 채우도록 하려면 다음이 필요합니다. 앵커 태그의 기본 인라인 특성을 극복합니다. 과 같은 인라인 요소는 일반적으로 너비나 높이가 고정되어 있지 않습니다.

인라인 요소의 문제적 특성은 흐르는 텍스트에 사용되기 때문에 발생합니다. 줄 바꿈의 불확실성을 고려하면 인라인 요소에 고정 너비를 설정하는 것은 의미가 없습니다.

앵커 태그의 너비 제어를 활성화하려면 표시 속성을 변경하는 것이 중요합니다. 두 가지 유효한 옵션이 있습니다.

표시 속성 옵션:

• 블록: 이 옵션은 앵커 태그를 블록 수준 요소로 변환합니다. , 사전 정의된 너비와 높이를 가질 수 있습니다.
• 인라인 블록: 이 옵션은 인라인과 블록 속성을 결합하여 앵커 태그가 너비 제어에 반응하면서도 인라인 텍스트처럼 동작하도록 허용합니다.

예제 코드:

블록 또는 인라인 블록 표시 속성을 적용하려면 아래와 같이 CSS를 사용하세요.

<code class="css">a.wide {
    display: block;
}

a.wide-inline {
    display: inline-block;
}</code>

HTML 구현:

수정된 표시 속성을 HTML 코드에 통합하세요.

<code class="html"><ul id="menu">
  <li><a class="wide" href="javascript:;">Home</a></li>
  <li><a class="wide-inline" href="javascript:;">Test</a></li>
</ul></code>

참고:

그동안 IE6에서는 인라인 요소의 너비를 설정할 수 있습니다. 이 동작은 CSS의 잘못된 구현으로 간주됩니다.

위 내용은 목록 항목의 전체 공간을 채우기 위해 앵커 태그를 늘리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!