MS word中类似制表符功能的元素之间的间距

Question

如您在图片中看到的，通过按Tab键，我可以将第二个单词与行首的距离完全相同。

我想在html中具有相同的功能。我知道我可以使用<table>来做到这一点，但我很好奇是否有更简单的方法，例如MS word。

<span>Firstword<span>&nbsp;&nbsp;&nbsp;<span>Second<span>
<br>
<span>Second<span>&nbsp;&nbsp;&nbsp;<span>Third<span>

Answer 1

您可以使用flex CSS获得所需的结果。另外，根据需要添加边距权利。

<style>
	.row {
	  display: flex;
	  flex-direction: row;
	}

	.col {
	  display: flex;
	  flex-direction: column;
	  margin-right: 1em;
	}
</style>

<div class="row">

  <div class="col">
    <span>Firstword</span>&nbsp;&nbsp;&nbsp;<span>Second</span>
  </div>

  <br>

  <div class="col">
    <span>1</span>&nbsp;&nbsp;&nbsp;<span>2</span>
  </div>

</div>