text-align이 양쪽 끝에서 정렬을 달성하는 방법

이번에는 text-align양 끝 정렬 방법과 text-align 양쪽 끝 정렬에 대한 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

방법 1: text-align-last: justify;

html

<p>
        <p class="item">
            <label for="name" class="itemLabel">姓名</label>
            <input type="text" class="itemContent" id="name">
            
        </p>
        <p class="item">
            <label for="phone" class="itemLabel">手机号</label>
            <input type="text" class="itemContent" id="phone">
        </p>
        
 </p>

css

 .itemLabel{
            display: inline-block;
            width: 60px;
            text-align-last:justify;
    }

text-align-last와의 호환성 문제로 인해: https://caniuse.com/#search=text-align -마지막으로 다음을 달성하려면 방법 2를 사용해야 합니다.

css

        .item{
            position: relative;
        }
        .itemContent{
            position: absolute;
            left:70px;
        }
        .itemLabel{
            display: inline-block;
            width: 60px;
            text-align: justify;
        }
       .itemLabel:after{
            display: inline-block ;
            content: ''; 
            width: 100%;
        }

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요. !

추천 도서:

Node.js에서 HTTPS를 배포하는 방법

JavaScript 범위 사용

위 내용은 text-align이 양쪽 끝에서 정렬을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!