如何在 CSS 中控制 list-style-type 光盘的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7990429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to control size of list-style-type disc in CSS?
提问by Satya Prakash
My HTML first:
我的 HTML 首先：
<ul class="moreLinks" >
<div>More from Travelandleisure.com</div>
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
<li><a rel="nofollow" href="">xyz1</a></li>
</ul>
I know that I can apply font-size on li very small so that disc look correct to me and then apply css to "a" inside li. But I do not know why this is not working on the site I am working. I cannot control the html directly.
我知道我可以在 li 上应用非常小的字体大小，这样光盘看起来对我来说是正确的，然后将 css 应用到 li 中的“a”。但我不知道为什么这在我工作的网站上不起作用。我无法直接控制 html。
I saw that when I make this:
我在做这个时看到了：
.farParentDiv ul li {
list-style: disc inside none;
}
TO this:
对此：
.farParentDiv ul li {
list-style-type: disc;
font-size:10px;
}
and now after applying font-size to "a", it works in Firebug. but from my css file. I tried a lot but tired. I can overwrite the above this in css file but cannot change it directly as I did in firebug. Please write what can be the problem?
现在在将 font-size 应用于“a”后，它可以在 Firebug 中工作。但来自我的 css 文件。我尝试了很多，但很累。我可以在 css 文件中覆盖上述内容，但不能像在 firebug 中那样直接更改它。请写出是什么问题？
I used to put dots (.) just before link inside and then apply css on that to control the disc size, but as I said, I cannot control the HTML.
我曾经在链接之前放置点 (.) 然后在其上应用 css 来控制光盘大小，但正如我所说，我无法控制 HTML。
采纳答案by Derek Hunziker
I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way. This would also give you tight control over the size of the bullet.
我一直很幸运地使用背景图像，而不是相信所有浏览器都以完全相同的方式解释子弹。这也可以让您严格控制子弹的大小。
.moreLinks li {
background: url("bullet.gif") no-repeat left 5px;
padding-left: 1em;
}
Also, you may want to move your DIVoutside of the UL. It's invalid markup as you have it now. You can use a list header LHif you must have it inside the list.
此外，您可能想要移动DIV的外面UL。它是无效的标记，因为您现在拥有它。LH如果您必须将它放在列表中，则可以使用列表标题。
回答by Wesley Murch
Since I don't know how to control only the list marker size with CSS and no one's offered this yet, you can use :beforecontent to generate the bullets:
由于我不知道如何使用 CSS 仅控制列表标记的大小，而且还没有人提供此功能，因此您可以使用:before内容来生成项目符号：
li {
list-style: none;
font-size: 20px;
}
li:before {
content:"·";
font-size:120px;
vertical-align:middle;
line-height:20px;
}
Demo: http://jsfiddle.net/4wDL5/
演示：http: //jsfiddle.net/4wDL5/
The markers are limited to appearing "inside" with this particular CSS, although you could change it. It's definitely not the best option (browser must support generated content, so no IE6 or 7), but it might be the easiest - plus you can choose any character you want for the marker.
尽管您可以更改它，但标记仅限于出现在此特定 CSS 的“内部”。这绝对不是最好的选择（浏览器必须支持生成的内容，所以没有 IE6 或 7），但它可能是最简单的 - 而且您可以为标记选择任何想要的字符。
If you go the image route, see list-style-image
如果您走图像路线，请参阅 list-style-image
回答by Kolja
If you choose to use inline SVG to render your bullets, you can use widthand heightproperties to control their size:
如果您选择使用内联 SVG 来渲染您的项目符号，您可以使用宽度和高度属性来控制它们的大小：
ul {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='1' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-1 -1 2 2'><circle r='0.5' /></svg>");
}
.x_alternative {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2.2 -2.4 4 4'><circle r='1' /></svg>");
}<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul class="x_alternative">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>Click herefor an easy explanation of the viewBox.
单击此处获取 viewBox 的简单说明。
回答by VoVaVc
try to use diffrent font-size for li and a
尝试对 li 和 a 使用不同的字体大小
.farParentDiv ul li {
list-style-type: disc;
font-size:20px;
}
.farParentDiv ul li a {
font-size:10px;
}
this saved me from using images
这使我免于使用图像
回答by PoseLab
Instead of using position: absolute, text-indentcan be used to solve the "inside" problem:
可以用来解决“内部”问题position: absolute，而不是使用text-indent：
li {
list-style: inherit;
margin: 0 0 4px 9px;
text-indent: -9px;
}
li:before {
content: "· ";
}
回答by Steve Adams
Apart from using custom images for bullets, you can also style the ul or li elements one way and then style the contents differently, as seen here.
除了为项目符号使用自定义图像之外，您还可以以一种方式设置 ul 或 li 元素的样式，然后以不同的方式设置内容的样式，如下所示。
The benefit is the lack of images for one thing, and also the added control. The disadvantage is that it tends to involve non-semantic markup, except in this case where the anchors are required already.
好处是一方面缺少图像，另一方面增加了控制。缺点是它往往涉及非语义标记，除非在这种情况下已经需要锚点。
回答by Daniel Alsaker
I think by using the content"."; The dot becomes too squared if made too big, thus I believe that this is a better solution, here you can decide the size of the "disc" without affecting the font size.
我认为通过使用内容"."; 如果做得太大，点会变得太方，因此我相信这是一个更好的解决方案，在这里您可以决定“光盘”的大小而不影响字体大小。
li {
list-style: none;
display: list-item;
margin-left: 50px;
}
li:before {
content: "";
border: 5px #000 solid !important;
border-radius: 50px;
margin-top: 5px;
margin-left: -20px;
position: absolute;
}<h2>Look at these examples!</h2>
<li>This is an example</li>
<li>This is another example</li>You edit the size of the disk by editing the size of the border px. and you can adjust the distance to the text by how much - margin left you give it. As well as adjust the y position by editing the margin top.
您可以通过编辑边框 px 的大小来编辑磁盘的大小。并且您可以调整与文本的距离 - 您给它留下的余量。以及通过编辑边距顶部来调整 y 位置。
回答by JacobRossDev
I'm surprised that no one has mentioned the list-style-image property
我很惊讶没有人提到 list-style-image 属性
ul {
list-style-image: url('images/ico-list-bullet.png');
}
回答by JohnDoe
Easiest way for me is to use Unicode Characters and then style them with span tags. I'm going to use inline css for the sake of the example, but you can do it whatever way you prefer.
对我来说最简单的方法是使用 Unicode 字符，然后用 span 标签设置它们的样式。为了这个例子，我将使用内联 css，但是你可以用任何你喜欢的方式来做。
eg. When I want to use a square bullet and control its color and size:
例如。当我想使用方形项目符号并控制其颜色和大小时：
<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">█</span> HOME</a></li>
You can find lots of unicode bullets here:
你可以在这里找到很多 unicode 项目符号：
I do this because linking images for bullets seems a little unnecessary to me.
我这样做是因为链接子弹图像对我来说似乎有点不必要。
回答by Black
I am buliding up on Kolja's answer, to explain how viewBox works
我正在建立Kolja 的答案，以解释 viewBox 的工作原理
The viewBox is a coordinate system.
viewBox 是一个坐标系。
Syntax:viewBox="posX posY width height"
句法：viewBox="posX posY width height"
viewBox="0 0 4 4"will create this coordinate system:
viewBox="0 0 4 4"将创建这个坐标系：
The yellow area is the visible area.
黄色区域是可见区域。
So if you like to center something in it, then you need to use viewBox='-2 -2 4 4'
因此，如果您想将某些内容居中，则需要使用 viewBox='-2 -2 4 4'
ul {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='1' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-2 -2 4 4'><circle r='.5' /></svg>");
}
.y {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3 -2 4 4'><circle r='.5' /></svg>");
}
.z {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='-3.5 -2 4 4'><circle r='.5' /></svg>");
}Centered Circle (viewBox Method):
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Decrease Circle Radius:
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Move Circle Closer to Text:
<ul class="y">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
...even closer (use float values):
<ul class="z">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>But there is a much easier method, you can just use the circles cxand cyattributes.
但是有一个更简单的方法，您可以只使用圆圈cx和cy属性。
.centered {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='20' /></svg>");
}
.x {
list-style-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 100 100'><circle cx='50%' cy='50%' r='10' /></svg>");
}Centered Circle (cx/xy) Radius 20:
<ul class="centered_a">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Centered Circle (cx/xy) Radius 10:
<ul class="x">
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>