改行コードで改行

先日実績に追加した「EventCal」ではフッターの所が以下のようなデザインになっています。

この中の「サービス利用規約」から「運営会社について」までの5つのリンクの所なんですけど、皆さまはどうやって実装しますでしょうか?
4つ目のスタッフ募集の前で改行がかかる仕様です。

pの中にaをならべてbrで改行とかが簡単だと思うのですが、5つのリンクがあったらやっぱりulだよなーということで、以前に「Lea Verouのフレシキブルな複数行定義リスト」でそれっぽいのがあったはずだと思いたち、ulを利用しつつ改行コードとwhite-space: preで改行しています。
該当のCSSは以下のような感じです。

#footer .link li {
  display: inline;
}
#footer .link li:nth-child(4):before {
  content: "\000a";
  /* 改行コードLFの改行を挿入 */
  white-space: pre;
}

機会がありましたら利用してみてください。

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :