メニュー、アクセスなどで使用できるBOXを紹介。
こういった整列させた表はテーブルなどで作ることが多いが、元のテーマのCSSが邪魔することが多々あるため、BOXで作成。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
*—— アクセス表 ——*/ .access_box { margin: 0; } .access_box ul { margin: 0; list-style: none; } .access_box ul li { padding: 1em 0; border-bottom:1px dashed rgba(0,0,0,0.2); } .access_box ul li a { text-decoration: none; display: block; } .access_box-left { display: inline-block; width: 20%; margin-right: 10%; vertical-align: middle; text-align: center; } .access_box-right { display: inline-block; width: 70%; vertical-align: middle; } |
HTML
1 2 3 4 5 6 7 8 9 |
<div class="access_box"> <ul> <li><span class="access_box-left">住所</span><span class="access_box-right">030-0011 青森県青森市堤町2-1-7</span></li> <li><span class="access_box-left">電話番号</span><span class="access_box-right">017-718-3913</span></li> <li><span class="access_box-left">交通手段</span><span class="access_box-right">青森駅 徒歩3分</span></li> <li><span class="access_box-left">営業時間</span><span class="access_box-right">18:00 ~ 翌2:00</span></li> <li><span class="access_box-left">定休日</span><span class="access_box-right">不定休</span></li> </ul> </div> |
コメントを残す