增加 list-style-bullet 类型的大小答案

【问题标题】：Increase size of list-style-bullet type增加 list-style-bullet 类型的大小
【发布时间】：2011-12-09 19:40:51
【问题描述】：

有没有办法使用 CSS 来增加 just 项目符号列表样式类型的大小？我不想增加项目符号文本的大小，只是项目符号类型。我也不能使用图像或 JavaScript。它必须是我可以嵌入到 <head> 标签内的 <style> 标签内的东西。

【问题讨论】：

标签： css html-lists

【解决方案1】：

在旧版本的 IE 中可能无法使用。

li:before{ content:'\00b7'; font-size:100px; }

Demo

对于 IE6：

如果没有 javascript 或图像，我建议在每个列表项的开头放置一个 <span>&#183;</span> 并对其进行样式设置。

【讨论】：

+1 很好的例子（vertical-align:middle 在这里实际上很重要。很好）！ "\00b7" 也可以使用 "•" :)
我通常使用转义的十六进制值，因为我在使用该符号之前遇到了一些麻烦。例如，这个：span:before{content:""";} 不起作用，但是这个：span:before{content:"\0022";} 可以。
谢谢，书柜。优秀的解决方案，虽然我不能使用:before，因为它是一个仅限 IE6 的网站。
如果没有 javascript 或图像，但需要 IE6 的支持，我建议在每个列表项的开头放置一个 <span>&#183;</span> 并对其进行样式设置。
我认为这并不能完全解决问题。这仅更改第一行的行高。如果您有多个行项目，这是一个问题。示例：jsfiddle.net/1yjcg59c

【解决方案2】：

我不得不做类似的事情。我的方法是在 li 中的文本周围添加一个 span 标签：

<li><span>Item 1</span></li>
<li><span>Item 1</span></li>

然后你可以增加你的字体大小并减少你的span的字体大小：

li {
  font-size: 20px;
}
li span {
  font-size: 14px;
}

您可能需要调整行高和边距以适应额外的尺寸。但是这种方法还允许您将项目符号与文本分开着色。

【讨论】：

这非常适合电子邮件中的项目符号样式，因为您可以为它们使用内联样式。哦，HTML 电子邮件的可怕之处！ :)
简单而漂亮的解决方案，可让您轻松操纵子弹的颜色。

【解决方案3】：

要增加子弹的大小，您可以使用

li::marker 
{
    font-size: 2rem;
    font-weight: bolder;
}

要更改项目符号字符，内容属性将起作用

li::marker 
{
    content: '\2746'
    font-size: 2rem;
    font-weight: bolder;
}

【讨论】：

【解决方案4】：

当你说你不能使用图片时，你的意思是你不能编辑li标签来添加图片，或者你根本不能使用图片？

在li 元素上，您可以设置list-style-image 属性。

li {
 list-style-image: url('/imagepath.png');
}

这仍然可以进入您的 head 标签，而无需编辑列表的标记。

【讨论】：

找到这个stackoverflow.com/questions/7563344/…。我会更深入地研究它。虽然我也不能使用javascript。这是一个非常古老的特殊用途应用程序。

【解决方案5】：

我不知道。

但你可以使用 :before 来伪造它

ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}

【讨论】：

谢谢，凯。这是一个 IE6 站点，所以不能使用before

【解决方案6】：

为（例如： .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;}

【讨论】：

【解决方案7】：

也在寻找解决方案，发现如果在 li 中嵌套 p，则可以分别设置项目符号和项目符号文本的样式。

<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*/
}

【讨论】：