ホーム > CSS > 複数行で、文字の空白と先頭を揃える

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

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

dl要素やtable要素でマークアップするのも良いですが、inline-blockプロパティを利用してちょっと簡単に対応が可能です。

マークアップなど

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

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

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

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

この記事のトラックバック URL: http://blog.magical-remix.net/kotalog/archives/1366/trackback
トラックバックの送信元リスト: 複数行で、文字の空白と先頭を揃える - kotaログより

ホーム > CSS > 複数行で、文字の空白と先頭を揃える

イベント・セミナー情報

仙台では5回目となるCSS Nite、開催決定しました。申し込み受付中です。

DTP Booster 015、仙台で初開催です。

CSS Nite LPシリーズの第11弾は、ビジュアルデザインにフォーカスした内容です。（LP12と二部構成）

CSS Nite LPシリーズの第12弾は、LP11の後半戦としてビジュアルデザインにフォーカスします。

福島県郡山市でMovable Typeに関する大規模なカンファレンスが開催されます。

カテゴリー

アーカイブ

カレンダー

検索

RSS購読

最近の投稿

最近のコメント

リンク

オススメサーバー

月額1500円
PHPやMySQLなどのバージョンが新しく、あらゆるCMSも問題なく動きます。ドメイン、サブドメインも無制限でここ1つ契約してしまえば複数サイトの運営もバッチリです。42.195GBの超大容量。

月額525円
非常にリーズナブルです。基本機能はきっちり押さえられており、あらゆるホームページに最適です。容量は余裕の15GB

月額263円〜
激安です。機能面でもこれと言った不満もなく、手軽に個人サイト運営に利用できます。8GB容量なので、サイズをほとんど気にせず利用できるのも魅力です。

ドメイン登録ならムームードメイン。ペパボの各サービス（heteml、チカッパ、ロリポップ）などの連携はクリックして設定を進めるだけ。ドメイン登録料金もかなり安いです。

スポンサードリンク

ページの上部に戻る