-

CSS3でリストを横並びにして右に三角を付けたようなチャートのようなものを作りたいのです。テキストは2行でa要素なしで作る方法を探しています。最後のリストは三角なしにしたいです。
after要素を使用し三角を横に付けたようなパンくずリストのサンプルはたくさんありますが、どれもline-heght使いやリンクありばかりでどうやって応用するばいいのかわかりません。。。

みんなの回答 4 件

名無しさんの回答

aをpとかdivとかべつのタグに置き換えてもいけるような気がするんだけど、無理?

名無し

一度sectionとかでやってみたのですがうまくいきませんでした。私がやり方がよくわかっていないせいかと思いますが。

名無しさんの回答

文じゃ良く分からんから、図にしてみしてくれる?

名無し

こちらにあるサンプルのような感じです。こんなデザインで2行、リンクなしで作りたいのですが。//rosea.jpn.org/demo/css3/TriangleBreadcrumbs.html

名無しさんの回答

そのサンプルを改造することから始めてみるとよろしいかと思いますよ。
テキストは<br>改行するなりwidthで幅を固定するなりして折り返しすなりして複数行にして、サンプルのa要素にスタイルが指定されているのであればp要素なりdiv要素なりで置き換えればいけるはずです。いけなければそのp要素なりdiv要素なりをdisplay:inlineしてみてください。どこかにコードをあげてもらえれば話が早いと思いますが。

名無し

ご回答ありがとうございます。しかしどのサンプルでもa要素をdisplay:blockとしてますので、よくわからなくなりまして…。

名無しさんの回答

li要素+リンクありで作られてるサンプルからa要素削除。もともとa要素に指定されていたスタイルをli要素に追記。基本的にはそれでできますよ。複数行テキストを縦方向中央揃えにしたい場合は、display:table-cell;+vertical-align:middle;が楽チン。CSS3使うってことはIE8未満は無視でいいんですよね?

名無し

あ、a要素スタイルをli要素に移動するときに、「display:block;」は不要ですよ。liはもともとdisplay:blockですからね。てゆーか何でa要素にdisplay:block;ってついてるのかその理由をきちんと理解してください。そうすれば何も難しくないです。

名無し

そうだね、まずはブロック要素とインライン要素の違いを覚えた方がいいかも。

最終更新日:2012-07-12 (4,876 views)

関連するトピックス

ページ上部に戻る