我想知道如何在一个单词之后做标签空间，以便之后出现的模式将彼此对齐

Question

我想知道如何在一个单词之后做标签空格。 显示的输出是我目前拥有的。 但是我想这样做，即使泰语单词比广东话短，我希望他们之后的圆圈从同一点开始，这样看起来会更有条理。 下面是我的PHP代码，用于生成可能是“泰语”，“英语”等语言。如果语言水平熟练，它将显示1个循环等等。

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

    }

以下是我的圈子的css代码。

.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;
        }

这是我目前的输出。

Answer 1

HTML忽略标记之间的空格，因此无法使用制表符。 相反，如果您在课程标题中添加容器并为其修复宽度会更好。

目前，我认为你的HTML输出是这样的：

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

如果您将回显课程名称的部分更改为html以包含容器，然后向该容器添加min-width ，则可以模拟选项卡。

所以改变

echo $b;

喜欢的东西

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

然后添加一些CSS，如下所示：

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

这将导致类似以下内容：

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

Answer 2

你可以使用没有边框的Html表，当你不知道标签的最大长度（在你的情况下是粤语，泰语），你可以使用表

 <table border="0"> <tr> <td>Cantonese</td> <td>**</td> </tr> <tr> <td>Teo chew</td> <td>****</td> </tr> <tr> <td>Thai</td> <td>****</td> </tr> </table>