複数行で、文字の空白と先頭を揃える

どういう事かというと、下記のようなレイアウトの場合。

dl要素やtable要素でマークアップするのも良いですが、場合によりtableの中のtd内で上記のようなレイアウトを行いたいケースもあります。

floatなどでも実現できますが、あまりごってりしたソースにせず、スマートにやるにはinline-blockを使用します。

css

span {
display: inline-block;
width: 7em;
}

HTML

<span>月〜金</span>11:00〜16:00（ラストオーダー15:00）<br />
<span>土・日・祝</span>11:30〜22:00（ラストオーダー21:30）<br />

spanでマークアップした部分にinline-blockとwidthを当てます。
inline-blockはインライン要素でありながら、ブロック要素のように幅を付けたり出来ます。幅は、文字＋空き分をem指定で。

Posted in css
Tags: css