web-dev-qa-db-ja.com

リストスタイルの画像の位置を調整しますか？

List-style-imageの位置を調整する方法はありますか？

リスト項目にパディングを使用すると、画像はその位置にとどまり、パディングとともに移動しません...

cssimagehtml-lists
161
datisdesign

私は通常list-style-typeを非表示にし、移動可能な背景画像を使用します

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

「7px 7px」は、要素内の背景画像を整列させるものであり、パディングに関連しています。

72
NickGPS

まだ言及されていないこの質問に対する可能な解決策は次のとおりです。

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

Li：beforeの左上/左を使用して、新しい箇条書きを配置できます。 li：beforeの幅と高さは、選択する背景画像と同じ寸法である必要があることに注意してください。これはInternet Explorer 8以降で機能します。

17
Ramon de Jesus

私は同じ問題を抱えていましたが、背景オプションを使用できませんでした（そして複数の背景を使用したくなかった）ので、別の解決策を考えました

これは、アクティブ/現在のメニュー項目のインジケータのような正方形を持つメニューの例です（デフォルトのリストスタイルは、別のルールでnoneに設定されています）

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

"：before"擬似クラスで正方形文字を使用して正方形を作成し、絶対配置を使用して自由に配置できます。

11
lad1337

以下は、線の高さを増やして、テキストの左側と中央に小さな灰色のブロックを配置するために行ったことです。

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

これが誰かを助けることを願っています：D

8
kaed

私が最終的に解決したのは、画像自体を修正して、間隔を追加することでした。

Liで背景画像を使用すると、多くの場合に機能しますが、フロート画像と一緒にリストを使用すると失敗します（たとえば、テキストを画像の周囲にラップするため）。

お役に立てれば。

6
zeds

または、使用できます

list-style-position: inside;
6
Mathias Maes

できるもう1つのオプションは次のとおりです。

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

（0 3px）を使用して、リスト画像を配置します。

IE8 +、Chrome、Firefox、およびOperaで動作します。

リストスタイルを簡単に交換できるため、このオプションを使用します。画像をまったく使用する必要がない場合もあります。 （下のフィドル）

http://jsfiddle.net/flashminddesign/cYAzV/1/

UPDATE：

これにより、2行目に入力されるテキスト/コンテンツが考慮されます。

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

箇条書きとコンテンツの間にさらにスペースが必要な場合は、liにpadding-left：を追加します。

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

6
McLeodWebDev

あなたが本当にやりたいのは、パディング（現在<li>に追加している）を<ul>タグに追加すると、箇条書きが<li>のテキストとともに移動することだと思います。

調べることができるlist-style-positionもあります。行が箇条書きの画像を囲む方法に影響します。

3
xbakesx

「ダレン」のような答えですが、わずかな修正

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

クロスブラウザで動作し、パディングとマージンを調整するだけです

ネストの編集：このスタイルを追加して、サブネストされたリストにマージン左を追加します

ul ul {margin-left：15px; }

3
khaled_webdev

受け入れられた答えはちょっとしたファッジだと思いますが、余計なパディングとcssコマンドを使用する必要があります。

個人的にリスト項目にパディングを追加することはありません。通常は行の高さを制御し、ときどき余白で十分です。

カスタムリストスタイルの画像で位置合わせの問題が発生した場合、各リストの行に対する位置を調整するために必要な辺の周りにピクセルまたは2つの余分なスペースを追加するだけです。

0
AdamJones

デフォルトの箇条書き画像を非表示にして、background-imageを使用します。

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}
<ul>
<li>foo</li>
<li>bar</li>
</ul>
0
Ron Royston

フォントを使用したソリューション

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}
0
Fatih Topcu