여러 브라우저에서 정렬되지 않은 목록의 범위에 대해 고정 너비를 구현하는 방법은 무엇입니까?

순서가 지정되지 않은 목록 내 범위에 고정 너비 구현

웹 디자인 영역에서는 목록 내의 범위에 대해 고정 너비를 구현합니다. 순서가 없는 목록은 어려울 수 있습니다. 아래 HTML 스니펫을 고려하세요.

<code class="html"><ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul></code>

원하는 결과는 다음과 같이 각 범위 뒤의 텍스트를 수직으로 정렬하는 것입니다.

<code class="text">The lazy dog.
AND The lazy cat.
OR  The active goldfish.</code>

이를 달성하기 위한 일반적인 접근 방식은 다음과 같습니다. 다음 CSS를 적용하려면:

<code class="css">span {
  display: inline-block;
  width: 50px;
}</code>

그러나 이 솔루션은 특정 브라우저, 즉 Firefox 2 이하에서는 제한 사항에 직면합니다. 이러한 브라우저는 inline-block 값을 인식하지 못합니다. 이러한 브라우저의 대체 옵션은 -moz-inline-box를 사용하는 것입니다. 그러나 이는 inline-block과 정확하게 동일하지 않으며 특정 시나리오에서 다른 동작을 나타낼 수 있다는 점에 유의하는 것이 중요합니다.

모든 브라우저에서 일관성을 보장하려면 추가 CSS 조정이 필요할 수 있습니다. 그러한 해결책 중 하나는 다음과 같습니다.

<code class="css">@-moz-document url-prefix() {
  span {
    -moz-inline-box: true;
    width: 50px;
  }
}</code>

이 접근 방식을 사용하면 기본적으로 인라인 블록을 지원하지 않는 브라우저에서 원하는 고정 너비를 얻을 수 있습니다. 이 시나리오에서는 텍스트에 패딩을 추가하거나 태그 구조를 수정하는 것이 허용되지 않는다는 점에 유의하는 것이 중요합니다.

위 내용은 여러 브라우저에서 정렬되지 않은 목록의 범위에 대해 고정 너비를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!