html - 在同一行上对齐文本而不 float

Question

我试图在不使用 float 的情况下在同一行对齐文本，因为我正在使用的 html2pdf 转换器 不支持它。

代码如下:

.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 添加固定宽度并根据需要调整值:

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

你也可以考虑 padding-left 来推送内容:

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

更新

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

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>