CSS, wie meine Kreise nach einem Wort horizontal ausgerichtet werden

Question

Ich möchte Kreise für die verschiedenen Ebenen anzeigen. Zum Beispiel, wenn der Level geübt ist, wird 1 Kreis angezeigt. Ich bin in der Lage, die Kreise nach ihren Ebenen zu zeigen, aber der Kreis ist vertikal dargestellt. Ich möchte es horizontal zeigen.

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

Dies ist mein CSS-Code für den Kreis. Es wird die Kreise vertikal zeigen, aber ich möchte es horizontal.

.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

Haben Sie float: left; auf .language-Klasse versucht?

Und mit margin-left können Sie etwas Platz zwischen den Kreisen setzen.