CSS3でリストを横並びにして右に三角を付けたようなチャートのようなものを作りたいのです。テキストは2行でa要素なしで作る方法を探しています。最後のリストは三角なしにしたいです。after要素を使用し三角を横に付けたようなパンくずリストのサンプルはたくさんありますが、どれもline-heght使いやリンクありばかりでどうやって応用するばいいのかわかりません。。。
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;ってついてるのかその理由をきちんと理解してください。そうすれば何も難しくないです。
そうだね、まずはブロック要素とインライン要素の違いを覚えた方がいいかも。
みんなの回答 4 件
aをpとかdivとかべつのタグに置き換えてもいけるような気がするんだけど、無理？
文じゃ良く分からんから、図にしてみしてくれる？
そのサンプルを改造することから始めてみるとよろしいかと思いますよ。
テキストは<br>改行するなりwidthで幅を固定するなりして折り返しすなりして複数行にして、サンプルのa要素にスタイルが指定されているのであればp要素なりdiv要素なりで置き換えればいけるはずです。いけなければそのp要素なりdiv要素なりをdisplay:inlineしてみてください。どこかにコードをあげてもらえれば話が早いと思いますが。
li要素＋リンクありで作られてるサンプルからa要素削除。もともとa要素に指定されていたスタイルをli要素に追記。基本的にはそれでできますよ。複数行テキストを縦方向中央揃えにしたい場合は、display:table-cell;+vertical-align:middle;が楽チン。CSS3使うってことはIE8未満は無視でいいんですよね？
関連するトピックス