Question

我想知道如何在一个单词之后做标签空格。显示的输出是我目前拥有的。但是我想这样做，即使泰语单词比广东话短，我希望他们之后的圆圈从同一点开始，这样看起来会更有条理。下面是我的php代码，用于生成可能是＆＃39; thai＆＃39; english＆＃39; english＆＃39;如果语言水平熟练，它将显示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输出是这样的：

foreach(Control c in form.Controls)
    c.MouseDown += handler;

如果您将回显课程名称的部分更改为html以包含容器，然后将<div>Cantonese<div class='language1'></div></div>添加到该容器，则可以模拟标签。

所以改变

min-width

类似

echo $b;

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

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

这将产生如下内容：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

2 个答案: