リンク区切る罫線の高さを文字の大きさに揃える

質問

リンク区切る罫線の高さを文字の大きさに揃える

.footer_menu li a {
font-size: 0.75em;
}

.footer_menu li {
display: inline;
list-style-type: none;
border-left: solid 1px #ddd;
margin-left: 8px;
padding-left: 12px;
}

.footer_menu li.first {
border-left: none;
margin-left: 0;
padding-left: 0;
}

.footer_menu ul {
margin: 0;
padding-top: 0;
}
文字の高さに対して罫線の方が長い状態です。
文字の高さに合わせた線にしたいのですが…

border-left: solid 1px #ddd;

この高さを設定するにはどうしたらよいですか？

初歩的内容ですが、アドバイスをどうぞよろしくお願します。

回答No.1

BellBell · ベストアンサー

よくあるのは、li等を使用せずに単純にaでリンクを作成して並べる
リンクを区切るために、文字|(パイプ)を使用する形ですね。
<a href="hoge.html">hoge</a>&nbsp;|&nbsp;<a href="fuga.html">fuga</a>&nbsp;|&nbsp;<a href="ponyo.html">ponyo</a>
さらに文字をグレーにして(aは別指定)、区切りが強調され過ぎないようにするなど。

罫線は表示枠に対して付き、文字は枠内に収まるように作成されている。
文字にはフォントとして(文字の形として)余白が存在するため、どうやっても文字サイズに合わせた罫線を表示することは不可能でしょう。

区切り線ではなく、◆や■で見出し的に区切る方法もよく使われてますね。

あくまで余分な文字を付加したくない場合は、文字サイズに合わせた区切り線画像を用意して
background-position:left;
background-repeat:no-repeat;
padding-leftで画像と文字が重ならないように調節ってのはありかも知れません。

お礼

完璧にできました！
ご親切にありがとうございました。
感謝いたします。

回答No.2

naokita

.footer_menu li a {
font-size: 0.75em;
}
　じゃなくて、
li にfont-size: 0.75em;を指定する。