원하지 않는 간격 없이 인라인 블록 요소를 정렬하려면 어떻게 해야 합니까?

"text-align: justify"를 사용하여 인라인 요소 정렬

"text-align: justify"를 사용하여 인라인 블록 요소를 균등하게 정렬하려는 이전 시도에도 불구하고 문제 발생: 브라우저는 인라인 블록의 줄을 지우는 100% 너비 요소 뒤에 빈 수직 공간을 추가합니다. elements.

line-height: 0을 사용하지 않고 빈 공간을 제거하지만 원래 줄 높이를 버리는 솔루션을 찾고 잠재적인 대안을 모색합니다.

현재 해결 방법(IE8 , FF, Chrome 테스트 완료)

(바이올린 참조: https://jsfiddle.net/jasperdeGroot/xe27o/)

CSS:

.prevNext {
    text-align: justify;
}

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

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

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

설명:

이 해결 방법은 아래쪽 여백이 음수인 :before 의사 요소를 활용하여 텍스트를 위로 이동합니다. 여분의 줄을 제거합니다. 그런 다음 인라인 블록 요소는 이 변위를 보상하기 위해 상대적인 위치로 조정됩니다.

미래 솔루션

완전한 지원을 기다리는 유망한 솔루션은 " text-align-last: justify"는 해결 방법 없이 인라인 요소를 정렬합니다. 그러나 현재 Webkit 브라우저에서 실험적 기능을 활성화해야 하므로 접근성이 제한됩니다.

(바이올린 참조: https://jsfiddle.net/jasperdeGroot/c3r4w/)

CSS:

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

참고: 이 솔루션은 적합하지 않을 수 있습니다. 완전한 지원이 구현될 때까지 모든 브라우저에 적용됩니다.

위 내용은 원하지 않는 간격 없이 인라인 블록 요소를 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!