元素之间的间距，如选项卡功能答案

【问题标题】：Spacing between element like tab functionality元素之间的间距，如选项卡功能
【发布时间】：2020-01-12 11:22:41
【问题描述】：

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

我想在 HTML 中拥有相同的功能。我知道我可以使用<table> 做到这一点，但我很想知道是否有像 MS Word 这样更简单的方法。

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

【问题讨论】：

标签： html word

【解决方案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>

【讨论】：

【解决方案2】：

您可以指定跨度的宽度，因此其他跨度将位于同一位置：

.tab{
  display: inline-block;
  width: 150px;
}

<span class="tab">Firstword</span><span>Second</span>
<br>
<span class="tab">Second</span><span>Third</span>

【讨论】：

【解决方案3】：

使用grid查看此解决方案

它非常复杂，但可以让您（如 Word）完全控制页面或元素的间距。

我将网格划分为 10 像素的列和 20 像素的行。

body {
  display: grid; 
  grid-template-columns: repeat(auto-fill, 10px);
  grid-template-rows: repeat(auto-fill, 20px);
}

span:nth-child(odd) {
  grid-column: 1
}

span:nth-child(even) {
  grid-column: 12
}

<span>Firstword</span><span>Second</span>
<span>Second</span><span>Third</span>

【讨论】：