[解決済み] 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>
関連
-
[解決済み】iframeを水平方向にセンタリングする方法は?
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み] CSS - display: none; が機能しない
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み] 迷子の終了タグ "head"
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] CSS - display: none; が機能しない
-
[解決済み] d3.tipが動作しないのはなぜですか?
-
[解決済み] 文字列が部分文字列で終わっているかどうかをXPathでテストする?
-
[解決済み] Angular 2+のテンプレートで値を表す三項演算子
-
[解決済み] HTMLボタンのテキストを固定幅で折り返すには?
-
[解決済み] アトムでキーバインドリゾルバーのポップアップを消すにはどうしたらいいですか?