blocks|key|856123|text|似乎您可以(在某种程度上)使用标记上的填充来控制间距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|856124|<style+type="text/css">
++++li+{+padding-left:+10px;+}
</style>|code-block|syntax|javascript|856125|问题是，它似乎不允许您以类似于最后一个示例的方式压缩它。|856126|为此，您可以尝试关闭list-style-type并使用·|856127|<ul+style="list-style-type:+none;">
++++<li>&bull;Some+list+text+goes+here.</li>
</ul>|856128|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

It seems you can (somewhat) control the spacing using padding on the &lt;li&gt; tag.

<pre><code>&lt;style type="text/css"&gt;
 li { padding-left: 10px; }
&lt;/style&gt;
</code></pre>

The catch is that it doesn't seem to allow you to scrunch it way-snug like your final example.

For that you could try turning off list-style-type and using &amp;bull;

<pre><code>&lt;ul style="list-style-type: none;"&gt;
 &lt;li&gt;&amp;bull;Some list text goes here.&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|1070617|text|将它的内容放在一个相对定位的span中，然后可以通过span的left属性来控制空间。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1070618|​|1070619|li+span+{
++position:+relative;
++left:+-10px;
}|code-block|syntax|javascript|1070620|<ul>
++<li>item+1</li>
++<li>item+2</li>
++<li>item+3</li>
</ul>|1070621|1070622|entityMap^0|E|4|Q|4|V|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

Put its content in a <code>span</code> which is relatively positioned, then you can control the space by the <code>left</code> property of the <code>span</code>.

<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 span {
 position: relative;
 left: -10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
 &lt;li&gt;&lt;span&gt;item 1&lt;/span&gt;&lt;/li&gt;
 &lt;li&gt;&lt;span&gt;item 2&lt;/span&gt;&lt;/li&gt;
 &lt;li&gt;&lt;span&gt;item 3&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>

blocks|key|856265|text|这个应该可以了。一定要把你的子弹放在外面。你也可以使用CSS的伪元素，如果你可以将它们放在IE7中。我真的不推荐使用伪元素来做这类事情，但它确实可以控制距离。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|856266|​|856267|ul+{
++list-style:+circle+outside;
++width:+100px;
}

li+{
++padding-left:+40px;
}

.pseudo,
.pseudo+ul+{
++list-style:+none;
}

.pseudo+li+{
++position:+relative;
}

/*+use+ISO+10646+for+content+http://la.remifa.so/unicode/named-entities.html+*/
.pseudo+li:before+{
++content:+'\2192';
++position:+absolute;
++left:+0;
}|code-block|syntax|javascript|856268|<ul>
++<li>Any+Browser+really</li>
++<li>List+item
++++<ul>
++++++<li>List+item</li>
++++++<li>List+item</li>
++++</ul>
++</li>
</ul>

<ul+class="pseudo">
++<li>IE8%2B+only</li>
++<li>List+item
++++<ul>
++++++<li>List+item+with+two+lines+of+text+for+the+example.</li>
++++++<li>List+item</li>
++++</ul>
++</li>
</ul>|856269|856270|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

This should do it. Be sure to set your bullets to the outside. you can also use CSS pseudo elements if you can drop them in IE7 downward. I don't really recommend using pseudo elements for this kinda thing but it does work to control distance.

<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>ul {
 list-style: circle outside;
 width: 100px;
}

li {
 padding-left: 40px;
}

.pseudo,
.pseudo ul {
 list-style: none;
}

.pseudo li {
 position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
 content: '\2192';
 position: absolute;
 left: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
 &lt;li&gt;Any Browser really&lt;/li&gt;
 &lt;li&gt;List item
 &lt;ul&gt;
 &lt;li&gt;List item&lt;/li&gt;
 &lt;li&gt;List item&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="pseudo"&gt;
 &lt;li&gt;IE8+ only&lt;/li&gt;
 &lt;li&gt;List item
 &lt;ul&gt;
 &lt;li&gt;List item with two lines of text for the example.&lt;/li&gt;
 &lt;li&gt;List item&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>

blocks|key|1070782|text|您还可以使用背景图像替换作为替代方案，使您可以完全控制垂直和水平定位。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1070783|查看this+Question的答案|offset|length|1070784|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2441059/how-to-reduce-default-gap-between-bullet-and-text-in-li^0|0|2|D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

You can also use a background image replacement as an alternative, giving you total control over vertical and horizontal positioning.

See the answer to <a href="https://stackoverflow.com/questions/2441059/how-to-reduce-default-gap-between-bullet-and-text-in-li">this Question</a>

blocks|key|856422|text|您可以使用ul+li:before和背景图像，并将position:+relative和position:absolute分别指定给li和li:before。通过这种方式，您可以创建一个图像，并将其放置在相对于li的任何位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|856423|entityMap^0|5|C|P|I|18|H|1U|2|1X|9|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]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

You can use <code>ul li:before</code> and a background image, and assign <code>position: relative</code> and <code>position:absolute</code> to the <code>li</code> and <code>li:before</code>, respectively. This way you can create an image and position it wherever you want relative to the li.

blocks|key|856489|text|ul
{
list-style-position:inside;
}+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|856490|定义和用法|unstyled|856491|list-style-position属性指定列表项标记应该出现在内容流的内部还是外部。|856492|来源：http://www.w3schools.com/cssref/pr_list-style-position.asp|offset|length|856493|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/pr_list-style-position.asp^0|0|0|0|3|1M|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

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

Definition and Usage

The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.

Source: <a href="http://www.w3schools.com/cssref/pr_list-style-position.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_list-style-position.asp</a>

blocks|key|856520|text|这是一个老问题，但是:+here伪元素在这里工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|856521|<style>
++++li:before+{
++++++++content:+"";
++++++++display:+inline-block;
++++++++height:+1rem;++//+or+px+or+em+or+whatever
++++++++width:+.5rem;++//+or+whatever+space+you+want
++++}
</style>|code-block|syntax|javascript|856522|它工作得很好，不需要太多额外的规则或html。|856523|<ul>
++++<li>Some+content</li>
++++<li>Some+other+content</li>
</ul>|856524|干杯!|856525|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Old question, but the :before pseudo element works well here.

<pre><code>&lt;style&gt;
 li:before {
 content: "";
 display: inline-block;
 height: 1rem; // or px or em or whatever
 width: .5rem; // or whatever space you want
 }
&lt;/style&gt;
</code></pre>

It works really well and doesn't require many extra rules or html.

<pre><code>&lt;ul&gt;
 &lt;li&gt;Some content&lt;/li&gt;
 &lt;li&gt;Some other content&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Cheers!

blocks|key|856567|text|在li上使用text-indent效果最好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|856568|text-indent：-x+px；将使项目符号更靠近li，反之亦然。|856569|在IE的较早版本中，使用左侧负片可能无法正常工作。附言--尽量避免给出位置。|856570|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|$]]

Using text-indent on li works best.

text-indent: -x px; will move the bullet closer to li and vice-versa.

Using relative on span the negative left might not work properly with older versions for IE.
P.S- avoid giving positions as much as you can.

blocks|key|1071092|text|无序列表以ul标签开始。每个列表项都以列表项开头，默认情况下，列表项将用项目符号(小黑圈)标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1071093|++++<!DOCTYPE+html>
++++<html>
+++++++<body>
++++++++++<h2>Normal+List+</h2>
++++++++++<ul>
+++++++++++++<li>Coffee</li>
+++++++++++++<li>Tea</li>
+++++++++++++<li>Milk</li>
++++++++++</ul>
+++++++</body>
++++</html>|code-block|syntax|javascript|1071094|输出：|1071095|<!DOCTYPE+html>
<html>
<body>

<h2>Normal+List+</h2>

<ul>
++<li>Coffee</li>
++<li>Tea</li>
++<li>Milk</li>
</ul>

</body>
</html>|1071096|text-indent属性指定文本块中第一行的缩进。|1071097|注意:负值是允许的。如果该值为负值，则第一行将向左缩进。|1071098|<ul+style='text-indent:+-7px;'>
++<li>Coffee</li>
++<li>Tea</li>
++<li>Milk</li>
</ul>|1071099|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

An unordered list starts with the ul tag. Each list item starts with the 
The list items will be marked with bullets (small black circles) by default:

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;h2&gt;Normal List &lt;/h2&gt;
 &lt;ul&gt;
 &lt;li&gt;Coffee&lt;/li&gt;
 &lt;li&gt;Tea&lt;/li&gt;
 &lt;li&gt;Milk&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

Output:

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;h2&gt;Normal List &lt;/h2&gt;

&lt;ul&gt;
 &lt;li&gt;Coffee&lt;/li&gt;
 &lt;li&gt;Tea&lt;/li&gt;
 &lt;li&gt;Milk&lt;/li&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

The text-indent property specifies the indentation of the first line in a text-block. 
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

<pre><code>&lt;ul style='text-indent: -7px;'&gt;
 &lt;li&gt;Coffee&lt;/li&gt;
 &lt;li&gt;Tea&lt;/li&gt;
 &lt;li&gt;Milk&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|856688|text|这是另一个使用css计数器和伪元素的解决方案。我发现它更优雅，因为它不需要使用额外的html标记或css类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|856689|++++ol,
++++ul+{
++++++++list-style-position:+inside;
++++}
++++
++++li+{
++++++++list-style-type:+none;
++++}
++++
++++ol+{
++++++++counter-reset:+ol;+//reset+the+counter+for+every+new+ol
++++}
++++
++++ul+li:before+{
++++++++++++content:+'\2022+\00a0+\00a0+\00a0';+//bullet+unicode+followed+by+3+non+breakable+spaces
++++}
++++
++++ol+li:before+{
++++++++++++counter-increment:+ol;
++++++++++++content:+counter(ol)+'.\00a0+\00a0+\00a0';+//css+counter+followed+by+a+dot+and+3+non+breakable+spaces
++++}|code-block|syntax|javascript|856690|我使用不可换行的空格，以便空格只影响列表元素的第一行(如果列表元素超过一行长)。你可以在这里使用填充。|856691|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 is another solution using css counter and pseudo elements. I find it more elegant as it doesn't require use of extra html markup nor css classes :
<pre class="lang-css prettyprint-override"><code> ol,
 ul {
 list-style-position: inside;
 }
 
 li {
 list-style-type: none;
 }
 
 ol {
 counter-reset: ol; //reset the counter for every new ol
 }
 
 ul li:before {
 content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
 }
 
 ol li:before {
 counter-increment: ol;
 content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
 }
</code></pre>
I use non breakable spaces so that the spacing only affects the first line of my list elements (if the list element is more than one line long). You could use padding here instead.

blocks|key|856717|text|如果你只想减少项目符号和文本之间的间距，那么似乎有一个更简洁的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|856718|li:before+{
++++content:+"";
++++margin-left:+-0.5rem;
}|code-block|syntax|javascript|856719|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|$]]

There seems to be a much cleaner solution if you only want to reduce the spacing between the bullet point and the text:

<pre><code>li:before {
 content: "";
 margin-left: -0.5rem;
}
</code></pre>

blocks|key|856744|text|使用padding-left:1em;+text-indent:-1em作为<li>标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|856745|然后，<ul>标记的list-style-position:+inside。|856746|<ul+style='list-style-position:+inside;'>
++<li+style='padding-left:+1em;+text-indent:+-1em;'>Item+1</li>
</ul>|code-block|syntax|javascript|856747|entityMap^0|2|Y|12|4|0|3|4|A|R|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

Use <code>padding-left:1em; text-indent:-1em</code> for the <code>&lt;li&gt;</code> tag. 
Then, <code>list-style-position: inside</code> for the <code>&lt;ul&gt;</code> tag.

<pre><code>&lt;ul style='list-style-position: inside;'&gt;
 &lt;li style='padding-left: 1em; text-indent: -1em;'&gt;Item 1&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|1071251|text|你可以只给你的<li>元素一个padding-left。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1071252|entityMap^0|7|4|F|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

You can just give a <code>padding-left</code> to your <code>&lt;li&gt;</code> element.

blocks|key|1071306|text|如果您的列表样式是inside，那么您可以删除项目符号并创建自己的...例如(在scss中！)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1071307|++++++++++++li+{
++++++++++++++++list-style:+none;
++++++++++++++++&:before+{
++++++++++++++++++++content:+'-+';
++++++++++++++++}
++++++++++++}|code-block|syntax|javascript|1071308|如果你列出的样式是outside，那么你可以这样做：|1071309|++++++++++++li+{+
++++++++++++++++padding-left:+10px;
++++++++++++++++list-style:+none;
++++++++++++++++&:before+{
++++++++++++++++++++content:+'*+';+/*+use+any+character+you+fancy~!+*/
++++++++++++++++++++position:+absolute;
++++++++++++++++++++margin-left:+-10px;
++++++++++++++++}
++++++++++++}|1071310|entityMap^0|9|6|0|0|9|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

If your list-style is <code>inside</code> then you could remove the bullet and create your own ... e.g. (in scss!)
<pre class="lang-css prettyprint-override"><code> li {
 list-style: none;
 &amp;:before {
 content: '- ';
 }
 }
</code></pre>
And if you list style is <code>outside</code> then you could do something like this:
<pre class="lang-css prettyprint-override"><code> li { 
 padding-left: 10px;
 list-style: none;
 &amp;:before {
 content: '* '; /* use any character you fancy~! */
 position: absolute;
 margin-left: -10px;
 }
 }
</code></pre>

blocks|key|856907|text|More+info+w3schools+ul+{+list-style:+none;+}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|856908|ul+li：：在{+content:+"\2022";+color:+black;+display:+inline-block;+width:+8px;}之前|856909|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/howto/howto_css_bullet_color.asp^0|P|H|0|J|0|0|A|H|S|D|16|M|1T|B|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<a href="https://www.w3schools.com/howto/howto_css_bullet_color.asp" rel="nofollow noreferrer">More info w3schools</a>
ul {
<code>list-style: none;</code>
}
ul li::before {
<code>content: &quot;\2022&quot;;</code>
<code>color: black;</code>
<code>display: inline-block;</code>
<code>width: 8px;</code>}

I'd like to control how much horizontal space a bullet pushes its <code>&lt;li&gt;</code> to the right in an <code>&lt;ol&gt;</code> or <code>&lt;ul&gt;</code>.

That is, instead of always having

<pre><code>* Some list text goes
 here.
</code></pre>

I'd like to be able to change that to be

<pre><code>* Some list text goes
 here.
</code></pre>

or

<pre><code>*Some list text goes
 here.
</code></pre>

I looked around but could only find instructions for shifting the entire block left or right, for example, <a href="http://www.alistapart.com/articles/taminglists/" rel="noreferrer">http://www.alistapart.com/articles/taminglists/</a>

CSS: Control space between bullet and <li>

我想控制在<ol>或<ul>中，一颗子弹将其<li>向右推的水平空间有多大。也就是说，不是总是有* Some list text goes here.我希望能够改变这一点* Some list text goes here.或*Some list text goes here.我...

问CSS:控制bullet和<li>之间的空格
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:控制bullet和<li>之间的空格EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:控制bullet和<li>之间的空格
EN