html - 标签功能等元素之间的间距

Question

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

我想在 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 来达到预期的效果。另外，根据需要添加 margin-right。

<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>Third</span>&nbsp;&nbsp;&nbsp;<span>Fourth</span>
  </div>

</div>