Интервал между элементами, такими как функциональность вкладок

Question

Как вы можете видеть на картинке, я могу управлять вторыми словами, чтобы они находились точно на одинаковом расстоянии от начала строки, нажав * 1006. * ключ

Я хочу иметь такую ​​же функциональность в 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>Third</span>&nbsp;&nbsp;&nbsp;<span>Fourth</span>
  </div>

</div>

Answer 2

Вы можете указать ширину пролетов, чтобы остальные были в том же положении:

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

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

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