我想知道如何在单词后添加制表符，以便后面的模式相互对齐

Question

我想知道如何在单词后添加制表符。显示的输出是我目前拥有的。但是我想这样做，即使泰语这个词比粤语这个词短，我也希望它们后面的圆圈从同一点开始，这样看起来更有条理。下面是我的php生成语言的代码，可以是'thai'、'english'等，如果语言水平熟练，会显示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 table带边框none，当你不知道标签的最大长度时（在你的情况下是粤语，泰语），你可以使用table

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

Answer 2

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>

我想知道如何在单词后添加制表符，以便后面的模式相互对齐

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

css

php

whitespace