180

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

リストアイテムにパディングを使用すると、画像はその位置に留まり、パディングで移動しません...

4

17 に答える 17

217

あまり。パディングは（おそらく）リストアイテムに適用されているため、リストアイテム内の実際のコンテンツにのみ影響します。

背景とパディングのスタイルを組み合わせて使用​​すると、似たようなものを作成できます。

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

親リストコンテナ（ul）にスタイルを追加して、箇条書きのアイテムを配置することを検討している場合があります。このA List Apartの記事には、最初の参考資料として適しています。

于 2009-11-10T16:31:21.173 に答える
77

私は通常、リストスタイルタイプを非表示にし、移動可能な背景画像を使用します

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;
}

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

于 2009-11-10T16:30:36.120 に答える
22

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

    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の幅と高さは、選択した背景画像と同じサイズである必要があることに注意してください。これは、InternetExplorer8以降で機能します。

于 2014-02-19T14:13:26.940 に答える
12

私は同じ問題を抱えていましたが、バックグラウンドオプションを使用できなかった（そして複数のバックグラウンドを使用したくなかった）ので、別の解決策を考えました

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

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

}

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

于 2013-02-23T11:27:29.447 に答える
8

小さな灰色のブロックをテキストの左側と中央に配置し、行の高さを大きくするために私が行ったことは次のとおりです。

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

これが誰かに役立つことを願っています：D

于 2012-07-03T19:43:23.093 に答える
6

実行できるもう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/

アップデート：

これは、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/

于 2013-04-01T19:32:47.003 に答える
6

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

いくつかの提案としてliで背景画像を使用すると、多くの場合に機能しますが、リストをフロート画像と一緒に使用すると失敗します（たとえば、テキストを画像に折り返すため）。

お役に立てれば。

于 2013-06-12T12:02:00.490 に答える
6

またはあなたは使用することができます

list-style-position: inside;
于 2015-06-10T13:29:38.307 に答える
6

私はこのようなものを使用していますが、私にとってはかなりクリーンでシンプルに見えます：

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

上記のコードは、ほとんどの場合、そのまま機能します。
正確に調整するには、次のように変更できますvertical-align。

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

必要に応じて、代わりに設定することもlist-style: noneできます。liul

于 2019-07-20T20:03:05.563 に答える
3

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

あなたが調べることができるリストスタイルの位置もあります。これは、線が弾丸の画像をどのように折り返すかに影響します。

于 2009-11-10T16:44:51.170 に答える
3

「ダレン」の答えのようですが、マイナーな変更

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

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

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

ul ul {margin-left：15px; }

于 2012-05-17T14:18:56.000 に答える
2 
ul { 
     /* Remove default list icon */
     list-style:  none;
     padding:  0;

     /* Small width and margin to demonstrate the text wrapping */
     width: 200px;
     border:1px solid red;
}

li{
   /* Make sure the text is properly wrpped (not spilling in the image area) */ 
    display: flex;
}

li:before {
     content:  url(https://via.placeholder.com/10/0000FF/808080/?text=*);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   2em;
}
于 2020-09-09T15:03:14.300 に答える
0

受け入れられた答えは少し曖昧だと思いますが、余分なパディングとcssコマンドをいじくりまわす必要があります。

リストアイテムに個人的にパディングを追加することは決してありません。通常は行の高さを制御し、ときどきマージンで十分です。

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

于 2014-03-06T18:56:53.250 に答える
0

fontawesomeのソリューション

#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;}
于 2017-06-13T12:57:57.447 に答える
0

デフォルトの箇条書き画像を非表示にして、次の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>

于 2018-10-11T21:05:38.557 に答える
0 

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

于 2020-03-14T13:59:24.190 に答える
0

もう1つの回避策は、liアイテムをflexまたはに設定することinline-flexです。状況に応じて、より適切になります。HTMLに実際のアイコン/画像を配置した場合、デフォルトのフレックス位置は中央の水平線上になります。

于 2020-12-12T14:41:24.167 に答える