blocks|key|1411568|text|我通常隐藏列表样式类型，并使用背景图像，它是可移动的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411569|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;
}|code-block|syntax|javascript|1411570|"7px+7px“是对齐元素内部背景图像的元素，也是相对于填充的。|1411571|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I normally hide the list-style-type and use a background image, which is moveable

<pre><code>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;
}
</code></pre>

The "7px 7px" is what aligns the background image inside the element and is also relative to the padding.

blocks|key|1411797|text|这个问题的一个可能的解决方案还没有提到，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411798|++++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');
++++}|code-block|syntax|javascript|1411799|现在，您可以使用li:before的左上角来定位新的项目符号。请注意，li:before的宽度和高度需要与您选择的背景图像的尺寸相同。这在Internet+Explorer8和更高版本中有效。|1411800|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A possible solution to this question that wasn't mentioned yet is the following:

<pre><code> 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');
 }
</code></pre>

You can now use the top/left of the li:before to position the new bullet. Note that the width and height of the li:before need to be the same dimensions as the background image you choose. This works in Internet Explorer 8 and up.

blocks|key|1196404|text|我也有同样的问题，但是我不能使用背景选项(并且不想使用多个背景)，所以我想到了另一个解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196405|这是一个菜单示例，其中活动/当前菜单项具有类似方形的指示器(默认列表样式在另一个规则中设置为无)。|1196406|nav+ul+li.active>a:before{
++++content:+"■";
++++position:+absolute;
++++top:+-22px;
++++left:+55px;
++++font-size:+33px;

}|code-block|syntax|javascript|1196407|它通过使用带有":before“伪类的正方形字符创建一个正方形，并且可以通过使用绝对定位来自由定位。|1196408|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I had the same problem, but i could not use the background option (and didn't want to use multiple backgrounds) so i thought of another solution

this is an example for a menu that has a square like indicator for the active/current menu item (the default list style is set to none in another rule)

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

}
</code></pre>

it creates a square by using a square character with the ":before" pseudo class
and it is freely positionable by using absolute positioning.

blocks|key|1196352|text|下面是我所做的，让小的灰色块出现在文本的左侧和中间，并增加行高：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196353|line-height:200%25;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left+center;|code-block|syntax|javascript|1196354|希望这对某人有帮助:D|1196355|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here's what I did to get small grey blocks to be on the left side and in the center of the text with an increased lineheight:

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

Hope this helps someone :D

blocks|key|1411729|text|我最终采用的解决方案是修改图像本身以添加一些间距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411730|按照一些人的建议，在li上使用背景图像在很多情况下都有效，但当列表与浮动图像一起使用时(例如，让文本环绕图像)就会失败。|1411731|希望这能有所帮助。|1411732|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

The solution I settled for in the end was to modify the image itself to add some spacing.

Using a background image on the li as some suggest works in a lot of cases but fails when the list is used alongside a floated image (for example to get the text to wrap around the image).

Hope this helps.

blocks|key|1411901|text|或者您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411902|list-style-position:+inside;|code-block|syntax|javascript|1411903|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Or you can use 

<pre><code>list-style-position: inside;
</code></pre>

blocks|key|1412049|text|我正在使用这样的东西，对我来说似乎非常干净和简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412050|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;
}|code-block|syntax|javascript|1412051|上面的代码在我的大多数情况下都能正常工作。|1412052|为了进行精确的调整，您可以修改vertical-align，例如：|offset|length|style|CODE|1412053|vertical-align:++top;

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

/*+or+whatever+you+need+instead+of+"middle"+*/|1412054|如果愿意，可以在li上设置list-style:+none，而不是在ul上设置。|1412055|entityMap^0|0|0|0|F|E|0|0|8|2|D|G|Y|2|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|11|8|@$K|12|L|13|M|N]|$K|14|L|15|M|N]|$K|16|L|17|M|N]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|T|$]]

I'm using something like this, seems pretty clean &amp; simple for me:
<pre><code>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;
}
</code></pre>
The above code works as is in most of my cases.
 For exact adjustment you can modify <code>vertical-align</code>, e.g.:
<pre><code>vertical-align: top;

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

/* or whatever you need instead of &quot;middle&quot; */
</code></pre>
You may set <code>list-style: none</code> on <code>li</code> instead of <code>ul</code> if you prefer.

blocks|key|1411601|text|我认为您真正想要做的是将填充(您当前正在添加的)添加到标签中，然后项目符号将随文本一起移动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411602|还有一个列表风格的位置，你可以看看。它会影响线条环绕项目符号图像的方式。|1411603|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I think what you really want to do is add the padding (you are currently adding to the &lt;li&gt;) to the &lt;ul&gt; tag and then the bullet points will move with the text of the &lt;li&gt;.

There is also the list-style-position you could look into. It affects how the lines wrap around the bullet images.

blocks|key|1412076|text|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;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1412077|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-css prettyprint-override"><code>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;
}
</code></pre>

blocks|key|1411882|text|我发现被接受的答案有点含糊其辞，肯定也会与额外的填充和css命令发生冲突。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411883|我从不亲自添加填充到列表项中，通常会控制它们的行高，偶尔留出空白处就足够了。|1411884|当我遇到自定义列表样式图像的对齐问题时，我只需要在需要调整其相对于每个列表行的位置的任何一侧添加一两个像素的额外空间。|1411885|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I find the accepted answer a bit of a fudge, far too must jostling with extra padding and css commands. 

I never add padding to list items personally, normally controlling their line height and the occasional margin is enough. 

When I have an alignment issue with custom list style images I just add a pixel or two of extra space around whatever side is required to adjust its position relative to each list line.

blocks|key|1411922|text|使用fontawesome的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411923|#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;}|code-block|syntax|javascript|1411924|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

solution with fontawesome

<pre><code>#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;}
</code></pre>

blocks|key|1411976|text|隐藏默认项目符号图像，并使用background-image，因为您有更多的控制，如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1411977|​|1411978|li+{
++++background-image:+url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
++++background-repeat:+no-repeat;
++++background-position:+left+50%25;
++++padding-left:+2em;
}

ul+{
++++list-style:+none;
}|code-block|syntax|javascript|1411979|<ul>
<li>foo</li>
<li>bar</li>
</ul>|1411980|1411981|entityMap^0|E|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

Hide the default bullet image and use <code>background-image</code> as you have much more control like:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
&lt;li&gt;foo&lt;/li&gt;
&lt;li&gt;bar&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>

blocks|key|1412062|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412063|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;
++++++++}
++++}
}|code-block|syntax|javascript|1412064|1412065|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>My solution:

ul {
 line-height: 1.3 !important;
 li {
 font-size: x-large;
 position: relative;
 &amp;: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;
 }
 }
}</code></pre>
</div>
</div>

blocks|key|1196879|text|另一种解决方法是将li项设置为flex或inline-flex。这取决于可能更适合你的情况。如果你在HTML中放置了一个真实的图标/图像，那么默认的伸缩位置是在中心水平线上。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196880|entityMap^0|9|2|F|4|K|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Another workaround is just to set the <code>li</code> item to <code>flex</code> or <code>inline-flex</code>. Depending on the circumstances that may suit you better. In case you have a real icon / image placed in the HTML the default flex position is on the central horizontal line.

Is there a way to adjust the position of list-style-image?

When I use padding for list items the image will stay at its position and won't move with padding...

Adjust list style image position?

有没有办法调整list-style-image的位置？当我对列表项使用填充时，图像将停留在其位置，并且不会随着填充而移动。

问是否调整列表样式图像位置？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否调整列表样式图像位置？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否调整列表样式图像位置？
EN