CSS Kreise mit einer Reihe

Question

Ich brauche Kugeln zu machen Punkte wie folgt aus:

ich versuchte, an nichts zu denken, wie es zu tun, aber das einzige, was ich denken kann, macht es in Photoshop und mache ein img src-Tag. das beste wäre, wenn es ul und li Tags wären.

Hat jemand eine gute Idee, wie es zu tun? Ich habe versucht, so etwas wie dieses, aber es funktioniert nicht richtig: JSFIDDLE

HTML

<a href="abecadlo/"><div class="galeria">1</div></a> 
<a href="abecadlo/"><div class="galeria">2</div></a> 
<a href="abecadlo/"><div class="galeria">3</div></a> 

CSS

.galeria{ 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    margin-right: 2%; 
    display: inline; 
} 

Answer 1

Es gibt viele Ansätze, dies zu realisieren. Hier ist eine:

• eine Liste erstellen (ul oder ol) und entfernen Sie die Liste Stil (list-style: none;)
• initialisieren einen Zähler: counter-reset: section;
• Erhöhung Zähler auf jeder Listenpunkt und drucken Sie es ein Pseudo-Element mit (:before): content: counter(section); counter-increment: section;
• Stil des Pseudoelement (:before), wie Sie wollen, dass es

ul { 
 
    counter-reset: section; 
 
    list-style: none; 
 
} 
 

 
li { 
 
    margin: 0 0 10px 0; 
 
    line-height: 40px; 
 
} 
 

 
li:before { 
 
    content: counter(section); 
 
    counter-increment: section; 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 0 20px 0 0; 
 
    border: 1px solid #ccc; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
}

<ul> 
 
    <li>First item</li> 
 
    <li>Second item</li> 
 
</ul>

Weitere

• MDN: CSS counters
• MDN: Pseudo-elements

Demo

Lesen

Try before buy

Answer 2

Sie können Somethings wie folgt tun:

HTML

<a href="abecadlo/"><div class="galeria">1</div></a> 
<a href="abecadlo/"><div class="galeria">2</div></a> 
<a href="abecadlo/"><div class="galeria">3</div></a> 

CSS

.galeria{ 
    border-radius: 50%; 
    width: 25px; 
    height: 25px; 
    padding: 8px; 
    background: #fff; 
    border: 1px solid #000; 
    color: #000; 
    text-align: center; 
    font-size: 20px; 
}