추가 줄 바꿈 없이 인라인 블록 요소를 적절하게 정당화하려면 어떻게 해야 합니까?

인라인 블록 요소를 "text-align: justify;"로 올바르게 정렬할 수 있습니까?

이전 토론에서 " text-align: justify"를 사용하여 인라인 블록 요소를 균등하게 배포합니다. 그러나 이 기술을 사용하면 양쪽 정렬된 요소의 줄 끝에 줄 바꿈이 생성됩니다.

현재 해결 방법

이 추가 수직 공간을 없애려면 해결 방법은 인라인 블록 요소에 "위치: 상대"를 적용하는 동안 "앞 요소"에 음수 여백을 사용하는 것입니다. 이 조합은 텍스트 줄을 위로 이동하여 추가 줄을 제거합니다.

.prevNext {
    text-align: justify;
}

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

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

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

향후 솔루션

향후에는 "text-align-last" 속성이 Firefox 및 Internet Explorer에서 지원되는 는 보다 간단한 솔루션을 제공할 수 있습니다. 그러나 현재 Webkit에서는 완전히 구현되지 않았습니다.

.prevNext {
    text-align: justify;
    text-align-last: justify;
}

이 속성을 사용하면 인라인 블록 요소의 마지막 줄을 정당화할 수 있으므로 해결 방법이 필요하지 않습니다.

위 내용은 추가 줄 바꿈 없이 인라인 블록 요소를 적절하게 정당화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!