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

您是否尝试在float: left;课程中使用.language？

使用margin-left，您可以在圈子之间留出一些空格。