CSS 增加 list-style-bullet 类型的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8450817/
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
Increase size of list-style-bullet type
提问by Chris22
Is there a way to increase the size of justthe bullet list-style-type using CSS? I don't want to increase the size of the bullet text, just the bullet type. I can't use images or JavaScript either. It has to be something I can embed inside <style>tags within the <head>tag.
是否有增加的大小的方式只是子弹使用CSS列表样式类型？我不想增加项目符号文本的大小，只想增加项目符号类型。我也不能使用图像或 JavaScript。它必须是我可以在<style>标签内嵌入标签的东西<head>。
回答by bookcasey
Might not work in old version of IE.
在旧版本的 IE 中可能无法使用。
li:before{ content:'\00b7'; font-size:100px; }
li:before{ content:'\00b7'; font-size:100px; }
For IE6:
对于 IE6：
Without javascript or images, I would recommend putting a <span>·</span>in the beginning of every list item and styling that.
如果没有 javascript 或图像，我建议<span>·</span>在每个列表项的开头放置一个并为其设置样式。
回答by Tom Clarke
I have had to do something similar. My method was to add a span tag around the text within the li:
我不得不做类似的事情。我的方法是在 li 中的文本周围添加一个 span 标签：
<li><span>Item 1</span></li>
<li><span>Item 1</span></li>
Then you can increase the font-size of you li and reduce the font size of your span:
然后，您可以增加 li 的字体大小并减小跨度的字体大小：
li {
font-size: 20px;
}
li span {
font-size: 14px;
}
You may need to adjust line-heights and margins to accommodate for the extra li sizing. But this method will also allow you to colour the bullets separate from text.
您可能需要调整行高和边距以适应额外的 li 大小。但是这种方法还允许您将项目符号与文本分开着色。
回答by deeble
Was looking for a solution to this too and found that if you nest a p inside li, you can style the bullets and bullet text separately.
也在寻找解决方案，发现如果将 ap 嵌套在 li 中，则可以分别设置项目符号和项目符号文本的样式。
<div>
<ul>
<li><p>Hello</p></li>
</ul>
</div
div ul li {
/*this will style the bullets*/
}
div ul li p {
/*this will style the text*/
}
回答by Brandon
When you say you can't use images, do you mean you can't edit the litags to add images, or that you can't use an image at all?
当你说你不能使用图像时，你的意思是你不能编辑li标签来添加图像，或者你根本不能使用图像？
On the lielements, you can set the list-style-imageproperty.
在li元素上，您可以设置list-style-image属性。
li {
list-style-image: url('/imagepath.png');
}
This can still go in your head tag without editing the markup of the list.
这仍然可以进入您的头部标签，而无需编辑列表的标记。
回答by Kae Verens
no way that I'm aware of.
没有办法，我知道。
but you could fake it by using :before
但你可以通过使用 :before 来伪造它
ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
回答by Lohith
put any background color for the (ex: .menu li a )tag and add padding for that you will get like a box then border-radius and then for ( .menu li ) apply padding for left and right for spacing... (explained in reverse order)
为 (ex: .menu li a ) 标签添加任何背景颜色并添加填充，你会得到一个盒子，然后边框半径，然后 ( .menu li ) 为左右应用填充间距......（以相反的顺序解释）
#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}
