1

次のようなリストがあります。

<ol>
    <li class="node">1</li>
    <li class="node">2</li>
    <li class="node">3</li>
    <li class="node">4</li>
    <li class="node_end">5</li>
</ol>

CSSのデフォルトの箇条書きを置き換えるために画像を使用しています。エンドノードには個別の画像が使用され、他のすべての箇条書きには別の画像が使用されます。画像は表示されますが、これらの画像を追加するとすぐに、各リストアイテムの上部と下部に4ピクセルのパディングが追加されます。この余分な間隔により、高さが26ピクセルの高さから34ピクセルの高さに変更されます。このギャップは、私のデザインに従って0pxの間隔を持つことを意図した異なる箇条書き画像の間に約8ピクセルの分離を提供します。

私が作成したCSS：

li {
    margin: 0;
    padding: 0;
    border: 0;
}
li.node {
    list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
    list-style-image: url('../imgs/nodes/ur.png');
}

この間隔を削除する方法はありますか？すべてのliに関連するすべてのパディング/間隔/境界線を削除しようとしましたが、これまでのところ何もありません。

編集：

私は自分の質問を十分に明確にしていないと思うので、私はそれがどのように見えるかのイメージを私の側に投稿しています。

問題が何であるかの例。

上の画像に表示されている結合バーは、（1つの連続した画像のように）接続されているはずです。箇条書きの特別なCSS画像を削除すると、各アイテムの高さがCSSの箇条書き画像の高さになります（Google Chromeの要素検査ツールを使用してテストしたため）。

編集2：

私の問題を示すための近い例はここにあります：http：//jsfiddle.net/EyVRF/1/

4

2 に答える 2

1

ギャリーケアンズは何かに興味があるかもしれません。私はあなたのコードをテストし、適切なサイズのWebサイトからリストスタイルの画像を借用しましたが、問題となるパディングは見られません。少なくとも、表示されているタイプではありません。

http://jsfiddle.net/BYQQV/

list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');

また、最後のリスト項目に対してまったく新しいクラスを作成する必要がないことを検討することもできます。代わりに試してください

li:last-child { list-style-image:.... }

AlthouthIEはそれに満足していません。しかし、将来の参考のために。

于 2013-01-29T21:39:35.653 に答える
0

.cssとhtmlの欠如は私があなたに答えることができません。概要：この間隔を削除する方法はありますか？ はいあります。

これを試して ：

ol, li{list-style-position:outside;margin:0;padding:0}

また

ol, li{list-style-position:inside;margin:0;padding:0}

私に当てさせてください ？.cssをリセットしませんでしたか?? （マージン：0;パディング：0）

わかりました、私はあなたが望むものを見ることができます..そして悲しいことに、あなたはこの方法であなたが望むものを達成することができません。

別の手法を使用する必要があります：背景画像。

<ul>
    <li class="node">1</li>
    <li class="node">2</li>
    <li class="node">3</li>
    <li class="node">4</li>
    <li class="node_end">5</li>
</ul>

ul, li {
    margin: 0;
    padding: 0;
}
li {
    font-size:16px;
    line-height:16px;
    list-style-type:none;
    background:red url('http://placehold.it/16x16') no-repeat scroll 0 0;
    padding-left:16px;
    border-bottom:1px solid blue;
}
li.node_end {
    background:blue url('http://placehold.it/16x16') no-repeat scroll 0 0;
}

http://jsfiddle.net/2RtB7/1/

続ける

PS、助けを求める前にもう少し検索してみてください-> CSS：箇条書きと<li>の間のスペースを制御します

于 2013-01-29T22:49:23.423 に答える