CODEWITHSUNDEEP
htmlcpu-word
Behnam
Behnam

Reputation: 1063

Spacing between element like tab functionality

enter image description here

As you can see in the picture, I can manage the second words to be exactly at the same distance from the start of the line by pressing the Tab key.

I want to have the same functionality in HTML. I know I can do this using <table> but I'm curious to know if there is any easier way like MS word or not. 

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

Upvotes: 4

Views: 742

Answers (3)

Tamas Szoke
Tamas Szoke

Reputation: 5542

You can specify the width of the spans, so the others will be in the same position:

.tab{
  display: inline-block;
  width: 150px;
}
<span class="tab">Firstword</span><span>Second</span>
<br>
<span class="tab">Second</span><span>Third</span>

Upvotes: 3

Mouser
Mouser

Reputation: 13304

Take a look at this solution using grid

It is very complex, but gives you (like Word) total control over spacing on the page or element.

I divided the grid in columns of 10 pixels and rows of 20 pixels.

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>

Upvotes: 1

stud3nt
stud3nt

Reputation: 2143

You can use a flex css to achieve the desired result. Also, add a margin-right according to your need.

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

Upvotes: 3

Related Questions