Speisekarte mit Punkte zwischen Speisen und..........Preis

[Gunnar Bittersmann]

@@Ralf Baumann

ich möchte eine Speisekarte erstellen, in der Form, dass zwischen Speisen und Preis Punkte sind. Etwa so:

Fisch.....................12,50 €

Überbackene Nudeln.........3,50 €

Fleisch...................23,50 €

Wenn möglich mit CSS.

Geht das?

Nicht so ganz trivial.

Als Markup bietet sich eine Beschreibungsliste (description list dl) an:

<dl>
	<div>
		<dt>Pizza Margherita</dt>
		<dd>5,50 €</dd>
	</div>
	<div>
		<dt>Pizza Salame</dt>
		<dd>6,50 €</dd>
	</div>
</dl>

Die div sind Flexboxen mit Abstand zwischen dt und dd:

dl > div
{
	display: flex;
	justify-content: space-between;
}

☞ Pizza 1

Fehlen nur noch die Punkte … Die ließen sich als Rahmenlinie eines Pseudoelements div::after realisieren. Damit die visuelle Reihenfolge dt – div::after – dd ist, wird letzters mit order: 1 ans Ende plaziert.

☞ Pizza 2 (was so ziemlich genau dem entspricht, was ’sup als Lösung präsentierte)

Fehlen immer noch Punkte, wenn das Gericht mehrere Gänge Zeilen beansprucht, weil sich die dt-Box über die Breite bis zur dd-Box ausdehnt und div::after nichts von der Breite abbekommt.

Versuche, die Rahmenlinie mit Pseudoelementen dt::after oder dd::before umzusetzen, schlagen ebenso fehl.

Beibt noch, die Rahmenlinie für das div anzugeben; dt und dd einen weißen Hintergrund zu verpassen und nach untern aus dem div herausragen zu lassen, also die Rahmenlinie überdecken zu lassen.

☞ Pizza 3

Aber auch hier ist die dt-Box ja rechteckig (Flex-Item), nimmt die Breite bis zur dd-Box ein und lässt von der Rahmenlinie nichts mehr zu sehen.

Eine Lösung wäre, nicht dt weißen Hintergrund zu geben, sondern einem darin befindlichen span-Element (welches keine Block-Box, sondern eine Inline-Box ist). Das zusätzliche Markup wäre aber ein kleiner Makel.

☞ Pizza 4

LLAP 🖖