1. ホーム
  2. html

[解決済み] HTMLとCSSで営業時間リストを作成するには?

2022-02-12 13:40:53

質問

基本的なhtmlとcssを使って、操作時間のリストを適切に作成する方法がわからなくて困っています。

2列のカラムを作ろうとしています。左側のカラムは曜日( text-align:right; )、右側は時間( text-align:left; ) で、日の右端と時間の左端が中央に揃うようにします。

これを実現し、2つのリスト項目を中央に揃える方法はないでしょうか?

を使用して行うことができます。 <dl> または2つの <ul> ?

ビジュアルはこちら

右側です。

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

間違っています。

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

解決方法は?

通常の <table> 要素を使用します。あなたのデータは実際にはテーブルなので、ここでそれを使っても恥ずかしくはありません。あるいは dl も有効です。

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>