Samuel Samuel - 5 months ago 6
CSS Question

I would like to know how can i do tab spaces after a word so that the pattern that comes after that would be align with each other

I would like to know how to do tab spaces after a word. The output shown is what i currently have. However i want to do it so that even though the word thai is shorter than the word cantonese, I want the circles after them to start at the same point so it will look more organized.
Below are my php codes to generate the language which could be 'thai', 'english' etc. and if the level of language is proficient, it will show 1 circle so on and so forth.

for($a = 0; $a < $count; $a++)
{
$b = $languagelevel[$a][0];
echo $b;


if($languagelevel[$a][1] == "Proficient")
{
for($i = 0; $i < 1; $i++)
{
echo "<div class='language1'></div>";
}
}
else if($languagelevel[$a][1] == "Good")
{
for($i = 0; $i < 2; $i++)
{
echo "<div class='language2'></div>";
}
}
else if($languagelevel[$a][1] == "Very Good")
{
for($i = 0; $i < 3; $i++)
{
echo "<div class='language3'></div>";
}
}
else
{
for($i = 0; $i < 4; $i++)
{
echo "<div class='language3'></div>";
}
}

echo "<br>";

}


Below are my css codes for the circles.

.language1
{
border-radius: 50%;
width: 15px;
height: 15px;
padding: 3px;
display:inline-block;
background-color: red;
border: 2px solid #666;
margin-left: 5px;

font: 20px Arial, sans-serif;
}

.language2
{
border-radius: 50%;
width: 15px;
height: 15px;
padding: 3px;
display:inline-block;
background-color: orange;
border: 2px solid #666;
margin-left: 5px;

font: 20px Arial, sans-serif;
}

.language3
{
border-radius: 50%;
width: 15px;
height: 15px;
padding: 3px;
display:inline-block;
background-color: green;
border: 2px solid #666;
margin-left: 5px;

font: 20px Arial, sans-serif;
}


This is the output that i currently have.
And this is my current output.

Answer

HTML ignores white spaces between tags, so it is not possible to use tabs. Instead, it would be better if you add a container to your course title, and fix a width for that.

Currently, I think your HTML output is like this:

<div>Cantonese<div class='language1'></div></div>

If you change the part where the course name is echoed to the html to include a container, then add a min-width to that container, you can simulate tabs.

So change

echo $b;

To something like

echo "<span class='container'>". $b . "</span>";

And then add some CSS like below:

.container {
  min-width: 50px; /* Here you set the width of the 'tab' */
  display: inline-block;
}

This will result in something like the following:

.container {
  min-width: 100px; /* Here you set the width of the 'tab' */
  display: inline-block;
}

.language1, .language2 {
  display: inline-block;
  }
<div><span class="container">Cantonese</span><div class="language1">Language 1</div></div>
<div><span class="container">Thai</span><div class="language2">Language 2</div></div>