php - Css 如何在一个词后水平对齐我的圆圈

Question

我想显示不同级别的圆圈。例如，如果级别是精通，它会显示 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='language'></div>";
            }
        }
        else if($languagelevel[$a][1] == "Good")
        {
            for($i = 0; $i < 2; $i++)
            {
                echo "<div class='language'></div>";
            }
        }
        else if($languagelevel[$a][1] == "Very Good")
        {
            for($i = 0; $i < 3; $i++)
            {
                echo "<div class='language'></div>";
            }
        }
        else 
        {
            for($i = 0; $i < 4; $i++)
            {
                echo "<div class='language'></div>";
            }
        }

        echo "<br>";

这是我的圈子的 CSS 代码。它会垂直显示圆圈，但我想要水平显示。

.language
        {
            border-radius: 50%;


            width: 20px;
            height: 20px;
            padding: 8px;

            background: #fff;
            border: 2px solid #666;
            color: #666;


            font: 20px Arial, sans-serif;
        }

Answer 1

您是否尝试过在您的 .language 类中使用 float: left;？

使用 margin-left，您可以在圆圈之间放置一些空间。