Wie erstelle ich eine Stundenliste mit HTML und CSS?

Question

Ich habe Probleme herauszufinden, wie man eine Liste für Stunden von Operationen mit grundlegenden HTML und CSS richtig erstellen.

Ich versuche, 2 Spalten zu machen. In der linken Spalte ist der Wochentag (text-align:right;) und auf der rechten Seite ist die Stunden (text-align:left;), so dass die rechte Kante des Tages und der linke Rand der Stunden in der Mitte ausgerichtet ist.

Gibt es eine Möglichkeit, dies zu tun und die 2 Listenelemente auf das Zentrum ausgerichtet zu halten?

Kann dies mit einer <dl> oder 2 <ul> getan werden?

hier ist eine visuelle Example

Rechts:

Sunday: Closed 
    Monday: 9am - 5pm 
    Tuesday: 9am - 5pm 
Wednesday: 9am - 5pm 
Thursday: 9am - 5pm 

Falsch:

Sunday: Closed 
Monday: 9am - 5pm 
Tuesday: 9am - 5pm 
Wednesday: 9am - 5pm 
Thursday: 9am - 5pm 

Answer 1

Sie ein normales <table> Element für diese verwenden können. Da Ihre Daten tatsächlich eine Tabelle sind, ist es keine Schande, sie hier zu verwenden. Alternativ könnte auch eine dl gültig sein.

th { 
 
    text-align: right; 
 
}

<table> 
 
<tr><th>Sunday</th><td>Closed</td></tr> 
 
<tr><th>Monday</th><td>9am - 5pm</td></tr> 
 
<tr><th>Tuesday</th><td>9am - 5pm</td></tr> 
 
<tr><th>Wednesday</th><td>9am - 5pm</td></tr> 
 
<tr><th>Thursday</th><td>9am - 5pm</td></tr> 
 
</table>