回答:
あんまり。パディングは(おそらく)リストアイテムに適用されているため、リストアイテム内の実際のコンテンツにのみ影響します。
背景とパディングスタイルの組み合わせを使用すると、似たようなものを作成できます。
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リスト以外の記事は良い出発の参照を持っています。
top
値を変更することでトップパディングの代わりに機能しました。 background: url(images/bullet.gif) no-repeat left 8px;
まだ言及されていないこの質問に対する可能な解決策は次のとおりです。
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以降で機能します。
私は同じ問題を抱えていましたが、背景オプションを使用できなかった(そして複数の背景を使用したくなかった)ので、別の解決策を考えました
これは、アクティブ/現在のメニューアイテムの正方形のようなインジケーターを持つメニューの例です(デフォルトのリストスタイルは、別のルールでnoneに設定されています)。
nav ul li.active>a:before{
content: "■";
position: absolute;
top: -22px;
left: 55px;
font-size: 33px;
}
":before"疑似クラスで正方形の文字を使用して正方形を作成し、絶対配置を使用して自由に配置できます。
実行できる別のオプションは次のとおりです。
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に追加します。
私が本当にやりたいことは、<ul>タグにパディング(現在<li>に追加している)を追加することです。すると、箇条書きポイントは<li>のテキストと共に移動します。
調べることができるリストスタイルの位置もあります。これは、行が弾丸の画像をどのように折り返すかに影響します。
「ダーレン」の答えのようですが、マイナーな変更
li
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}
クロスブラウザで動作し、パディングとマージンを調整するだけです
ネストの編集: このスタイルを追加して、マージンの左をサブネストリストに追加します
ul ul {margin-left:15px; }
私はこのようなものを使用しています、私にとってはかなりクリーンでシンプルなようです:
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
、li
代わりに設定することがul
できます。
デフォルトの箇条書きの画像を非表示にして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>
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;
}
}
}
list-style-image
配置できないとしたら何がポイント?結果として、ほとんどの人が同じような回避策を使用しているようだ::before
し、background-image
代わりに。