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


Tags: php,css,whitespace

Problem :

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.



Solution :

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>


    CSS Howto..

    CSS how to fill height of container?

    In jQuery, how do I animate the “max-height” CSS property?

    how do I select in css so the items appears in hover state In entire page(mega menu)

    How to make/render a font-awesome font “thin”? [duplicate]

    How to change background color of my selector's Pseudo-element on rollover?

    How to add custom css in Cognos?

    How to prioritize custom css over the default Angular-material css

    Responsive CSS, How to make clock maintain position with image on resize

    How to change visibility of a div css to visible with jQuery

    How to include .otf in css?

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    CSS/XHTML: Show div after a specific count of table rows

    How to line up a css ::before pseudo element like a grid

    How to fix bottom of layout of 100% height (jQuery Mobile and Google Map)?

    How to fix image urls when processing css files with Gulp?

    Tricky: In CSS and HTML, how to make a sub DIV go under the container if the container has a z-index of 0?

    How to deal with different screen resolutions in CSS?

    How to make a div one on the top and one on the bottom touching

    How to Auto set the height of a div using the height of another div

    How does Media Queries Reacts

    How to create circle image and text Which are complementary to each other in bootstrap or pure css?

    How to change the CSS on the last clicked div

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    How to use nav-pill with nav-justified from bootstrap3x without responsive features

    How to avoid double borders on list of divs

    How to get these divs side-by-side while still keeping position:relative and not using float?

    How to dynamically add a CSS class and implement its style in JavaScript

    Resize the content of a div based on how many objects are in the div

    How to Add a Vertical Line inside a texbox using html and css

    How can I prevent the Featherlight lightbox from creating recursive dialogs?