`text-align: justify`를 사용하여 인라인 블록 요소를 어떻게 균등하게 배포할 수 있나요?

"text-align: justify;"" 인라인 블록 요소가 균등하게 퍼질 수 있습니까?

문제 :

텍스트 정렬이 포함된 인라인 블록 요소: 양쪽 정렬 내용을 균등하게 분배하는 데 어려움을 겪고 줄 하단에 빈 수직 공간을 남겨 둡니다. 전통적인 솔루션에는 line-height: 0; 이는 기존 줄 높이 값을 방해할 수 있습니다.

현재 브라우저(IE8, FF, Chrome)에 대한 해결 방법:

이 CSS 방법으로 문제를 해결할 수 있습니다. 줄 높이를 방해하지 않고:

.prevNext {
    text-align: justify;
}

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

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

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

:before 요소는 텍스트 줄을 한 줄 위로 끌어옵니다. line-height, 추가 줄을 제거하지만 텍스트를 대체합니다. 인라인 블록 요소를 상대적으로 배치하면 추가 줄을 추가하지 않고도 이러한 변위에 대응할 수 있습니다.

"-text-align-last: justify;"를 사용한 미래 솔루션 (지원 임박):

보다 깨끗한 미래 솔루션 사용:

.prevNext {
    text-align: justify;
    text-align-last: justify; /* Supported in IE and FF, experimental in Chrome */
}

진행 중인 Webkit 지원:

부분적으로 Webkit 브라우저 이 솔루션을 지원하지만 실험적 기능을 활성화해야 합니다. 향후 버전에서는 완전한 지원이 예상됩니다.

위 내용은 `text-align: justify`를 사용하여 인라인 블록 요소를 어떻게 균등하게 배포할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!