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


169

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

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


1
CSS仕様にはまだ含まれていません。list-style-image配置できないとしたら何がポイント?結果として、ほとんどの人が同じような回避策を使用しているようだ::beforeし、background-image代わりに。
メンタリスト

回答:


205

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

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

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リスト以外の記事は良い出発の参照を持っています。


1
これにより、リストスタイルが通常のリストアイテムよりも少し右側に配置されます。これは、以下に通常のリストアイテムがある場合は少し「オフ」になります。私は独立した解決策を知りませんが、あなたの画像の幅に応じて、これはそれを改善します: "マージン:0 0 0 -7px;"
e-motiv、

トップポジショニングでは、top値を変更することでトップパディングの代わりに機能しました。 background: url(images/bullet.gif) no-repeat left 8px;
Sridhar Katakam

リストスタイルを直接スタイルすることができないのは本当に残念です。それは人々にあらゆる種類の回避策を使わせます。私は本当にリストスタイルであるものに対してリストスタイルを使用することを本当に好みますが、私がそれを思い通りに見せることはできません。
mcv

75

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

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」は、要素内の背景画像を揃えるものであり、パディングに対しても相対的です。


21

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

    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以降で機能します。


これは私の意見では最良の解決策です。:: before疑似要素を左にフロートしても、同じ効果が得られます。
TaylorMac

12

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

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

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

}

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


8

これは、小さな灰色のブロックをテキストの左側と中央に配置し、行の高さを上げるために行ったものです。

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

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


6

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

liで背景画像を使用すると、多くの場合動作しますが、フロート画像と一緒にリストを使用すると失敗します(たとえば、テキストを画像の周囲で折り返すため)。

お役に立てれば。


6

実行できる別のオプションは次のとおりです。

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

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

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


1
更新されたバージョンは、JSfiddle
McLeodWebDev


3

私が本当にやりたいことは、<ul>タグにパディング(現在<li>に追加している)を追加することです。すると、箇条書きポイントは<li>のテキストと共に移動します。

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


3

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

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

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

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

ul ul {margin-left:15px; }


3

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

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: noneli代わりに設定することがulできます。


0

受け入れられた回答は少しファッジですが、余計なパディングとcssコマンドを使用する必要があります。

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

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


ブラウザー間のレンダリングを処理する必要はありませんでしたね。
Volker E.

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

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>


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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.