我想知道如何在一个单词后使用制表符空格，以便之后出现的模式相互对齐

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>