정렬된 인라인 블록 요소 아래의 추가 수직 공간을 제거하는 방법은 무엇입니까?

"text-align: justify;"를 올바르게 정렬하는 방법 인라인 블록 요소

이전 토론에서 "text-align: justify"를 사용하여 인라인 블록 요소를 균등하게 배포하는 효과적인 방법을 모색했지만, 여전히 문제가 남아 있습니다. elements.

현재 해결 방법

이 문제는 다음을 사용하여 해결할 수 있습니다. 다음 CSS 및 HTML 구조:

HTML:

<div class="prevNext">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</div>

CSS:

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* adjust to your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* adjust to your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

설명:

음수 하단이 있는 :before 요소 여백은 텍스트 줄을 들어 올려 추가 공간을 제거합니다. 인라인 블록 요소의 상대적 위치 지정은 추가 줄을 추가하지 않고도 이러한 변화를 방지합니다. em 단위는 사용된 줄 높이에 관계없이 여백이 정렬되도록 보장합니다.

미래 솔루션

가까운 미래 솔루션에는 text-align-last 속성을 사용하는 것이 포함됩니다. :

.prevNext {
    text-align: justify;
    text-align-last: justify; /* IE */
}

이렇게 하면 추가 CSS 트릭이 필요하지 않지만 현재 Webkit에서 실험적인 기능 활성화가 필요합니다.

축소된 텍스트 문제 처리

축소로 인라인 블록 요소 사이의 공백이 제거되는 경우 앵커 태그 사이에 줄바꿈 방지 공백 문자( )를 추가하세요.

위 내용은 정렬된 인라인 블록 요소 아래의 추가 수직 공간을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!