플로트없이 같은 줄에 텍스트 정렬

Question

float을 사용하지 않고 동일한 줄에 텍스트를 정렬하려고하는데 사용중인 html2pdf converter에서 지원되지 않으므로 텍스트를 정렬하려고합니다.

코드는 다음과 같습니다 : 내가하지 않은, 별도의 줄에, 그러나, display 오른쪽으로, 텍스트를 오른쪽으로 정렬 변경하는 경우

.text1 { 
 
    padding: 10px 20px 0px 20px; 
 
    text-align: left; 
 
} 
 
.go-right { 
 
    display: inline-block; 
 
    text-align: right; 
 
}

<div class='text1'> 
 
    Bill to: <span class="go-right">text</span> <br/> 
 
    Amount: <br/> 
 
    Date: 
 
</div>

원하는 결과.

는

Answer 1

당신은 단순히 span에 고정 폭을 추가하고 필요에 따라 값을 조정할 수 있습니다

.text1 { 
 
    padding: 10px 20px 0px 20px; 
 
    text-align: left; 
 
} 
 
.go-right { 
 
    display: inline-block; 
 
    text-align: right; 
 
    width:calc(100% - 70px); /*Replace with fixed value if calc not supported*/ 
 
}

<div class='text1'> 
 
    Bill to: <span class="go-right">text</span> <br/> 
 
    Amount: <br/> 
 
    Date: 
 
</div>

또한 컨텐츠 밀어 패딩 왼쪽 고려할 수

:

을

.text1 { 
 
    padding: 10px 20px 0px 20px; 
 
    text-align: left; 
 
} 
 

 
.go-right { 
 
    display: inline-block; 
 
    text-align: right; 
 
    padding-left: 120px; 
 
}

<div class='text1'> 
 
    Bill to: <span class="go-right">text</span> <br/> Amount: <br/> Date: 
 
</div>

이 같은 고전적인 테이블 구조를 고려할 수 있습니다 위의 잘 컨버터가 지원하지 않는 두 방법으로 UPDATE

: 또한

table { 
 
width:100%; 
 
}

<table> 
 
    <tr> 
 
    <td>Bill to:</td> 
 
    <td>text</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Amount:</td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Date:</td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 2

을, 당신은을 설정할 수 있습니다 그런 자세로 절대 위치에 올려 놓으십시오. 예를

.go-right { 
text-align: right; 
width:100px; 
position: absolute; 
top: 20px; 
right: 80px; 
} 

Answer 3

의 경우도 Jsfiddle 링크를 확인 - https://jsfiddle.net/subhojit/r9x3Ln2o/

CSS :

.text1 { 
    padding: 10px 20px 0px 20px; 
    text-align: left; 
} 
.go-right { 
    margin-left: 2%; 
    width: 5em; 
    text-align: left; 
    display: inline-block; 
} 
.left-texts { 
    width: 3.5em; 
    text-align: left; 
    display: inline-block; 
} 

HTML :

<div class='text1'> 
    <span class="left-texts"> Bill to: </span> <span class="go-right">First Text</span> <br/> 
    <span class="left-texts"> Amount: </span> <span class="go-right">200</span> <br/> 
    <span class="left-texts">Date: </span> <span class="go-right">10-01-2018</span> <br/> 
</div>