CSS: Einfachste Möglichkeit, Textelemente in zwei unterschiedlich ausgerichtete Spalten mit dazwischen liegenden Aufzählungszeichen zu wechseln?

Question

Okay, ist diese Art von einem Bissen, aber was ich versuche zu tun, um die „Vitamine und Mineralien“ in der Standard-US FDA Nutrition Facts Box

erstellen

Ich baue die Seite mit PHP, also kann ich das programmatisch machen, aber gibt es eine elegante CSS-Methode, um Textelemente anzuzeigen, so dass jedes andere Element richtig rechts ausgerichtet ist? Und können die Kugeln, die die zwei Spalten teilen, automatisch platziert werden?

Ich würde gerne so etwas haben:

<ul id="vitaminssection"> 
    <li>Vitamin A 4%</li> 
    <li>Vitamin C 2%</li> 
    <li>Calcium 15%</li> 
    <li>Iron 4%</li> 
</ul> 

... und habe es, wie es im Bild formatiert. Ist das machbar?

Answer 1

Haben Sie es herausgefunden! : nth-Feld war der Schlüssel, insbesondere die Fähigkeit zu verwenden: n-ten Feld (ungerade) und: n-ten Feld (gerade). Ich verwendete ein Pseudo-Element auf den ungeraden, um die Kugel dazwischen zu setzen (und verwendete 51%/49% auf die Breiten, um es mehr oder weniger zu zentrieren). Dies funktioniert auf der HTML-I in der Frage enthalten:

#vitaminssection { 
    width: 350px; 
    background-color: #FFF; 
    list-style: none; 
    padding: 0px; 
} 

#vitaminssection li { 
    border-top: 1pt solid #000; 
} 

#vitaminssection li:nth-child(odd) { 
    width: 51%; 
    float: left; 
} 

#vitaminssection li:nth-child(odd):after { 
    content:'\2022'; 
    text-align: right; 
    float: right; 
} 

#vitaminssection li:nth-child(even) { 
    text-align: right; 
    float: right; 
    width: 49%; 
} 

Here's a jsfiddle.