Question

我正在尝试在不使用float的情况下在同一行上对齐文字，因为我正在使用的html2pdf converter不支持该文字。

代码如下：

.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>

如果我将display更改为右边，则文本会在右侧对齐，但是在单独的行上，这不是想要的结果。

Answer 1

您只需向span添加固定宽度，然后根据需要调整值：

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

您还可以考虑使用padding-left来推送内容：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

由于转换器不能很好地支持上述两种方法，您可以考虑使用这样的经典表结构：

＆＃13;

table {
 width:100%;
}

＆＃13;

<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>

＆＃13;

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>

在没有浮动的同一行上对齐文本

3 个答案: