4

丸で囲んだ数字を箇条書きにしてリストを作成しようとしています。最後の箇条書きは項目を追加するためのプラス記号です。問題は、プラス記号の HTML エンティティが数字のように垂直方向に中央揃えにならないことです。

<li><span>1</span><a href="#">Item one</a></li>
<li><span>2</span><a href="#">Item two</a></li>
<li><span>+</span><a href="#">add item</a></li>

スクリーンショットを参照してください: [リンク][1]

私は CSS にかなり強いのですが、画像なしでこれを達成する方法がないのは奇妙に思えます。

4

2 に答える 2

3

技術的には、テキストは中央に+配置されます。記号の上部が空白で埋められ、オフセットされているように見えるだけです。しかし、数字の下部を見て と比較すると+、それらは同じ位置にあります。

これを修正するには、+実際にその位置を数 Y ピクセルだけオフセットする特別なケースを使用するか、使用しているフォントを+領域の中央に配置されたフォントに変更します。

于 2013-09-06T17:30:10.463 に答える
1

このフィドルはあなたが探しているものですか？このスタイルを追加:

span {
    background:#ffffff;
    width: 15px;
    height: 15px;
    border:2px solid #dddddd;
    border-radius:15px;
    padding:5px 9px;
    font-size: 12px;
}
于 2013-09-06T17:35:00.623 に答える