전체 너비를 채우기 위해 `` 태그를 늘리는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

전체 너비를 채우기 위해 `` 태그를 늘리는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-10-26 16:30:03

원래의

937명이 탐색했습니다.

How to Stretch `` Tags to Fill the Entire `` Width?

스트레칭 전체를 채우는 태그

HTML 영역에서

요소는 목록 항목의 컨테이너 역할을 합니다. 종종 디자이너들은

의 전체 너비를 포함하도록 태그를 추가하세요. 안타깝게도 width: 100%; 와 같은 CSS 속성을 사용하여 이를 달성하려는 간단한 시도가 있습니다. height: 100%는 쓸데없는 것으로 판명됩니다.

이러한 곤경의 근본적인 원인은 태그를 인라인 요소로 사용합니다. 인라인 요소는 블록 요소와 달리 너비를 제어할 수 있는 고유한 기능이 부족합니다. 이 디자인 철학은 잠재적으로 여러 줄에 걸쳐 있을 수 있는 자동 스크롤 콘텐츠를 표현하는 기본 기능에서 비롯됩니다.

이러한 제한을 피하고 태그에는 미묘하지만 영향력 있는 변화가 필요합니다. 표시 속성을 차단 또는 인라인 차단으로 변경하면 태그는 블록형 요소의 너비 제어 기능을 상속하여 효과적으로 블록형 요소로 변환됩니다.

실제로 이 변환에는 해당 CSS 클래스를 태그를 지정하고 이에 따라 표시 속성을 설정합니다.

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

로그인 후 복사

이제 이 클래스가

요소는 사용 가능한 수평 공간을 채우기 위해 우아하게 늘어나서 원하는 효과를 완성합니다.

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

로그인 후 복사

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