如何在CSS中控制列表样式类型光盘的大小？

我的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>

为此：

.farParentDiv ul li {
    list-style-type: disc;
    font-size:10px;
}

现在，在将字体大小应用于“a”之后，它可以在Firebug中工作。但是从我的css文件。我试了很多，但是很累。我可以在css文件中覆盖上面的内容，但不能像在firebug中那样直接更改它。请写下有什么问题

---

我曾经在链接的前面加上点（.），然后在上面应用css来控制光盘的大小，但正如我所说的，我无法控制HTML

我一直很幸运地使用了背景图像，而不是相信所有浏览器都能以完全相同的方式解释项目符号。这也会让你严格控制子弹的大小

.moreLinks li {
    background: url("bullet.gif") no-repeat left 5px;
    padding-left: 1em;
}

---

此外，您可能需要将

DIV

移动到

UL

之外。现在的标记无效。如果必须在列表中使用列表标题，则可以使用列表标题。

除了为项目符号使用自定义图像外，还可以以一种方式设置ul或li元素的样式，然后以不同的方式设置内容的样式

---

好处是一方面缺少图像，另一方面增加了控件。缺点是它往往涉及非语义标记，除非在这种情况下已经需要锚定。

由于我不知道如何使用CSS仅控制列表标记大小，而且还没有人提供此功能，因此您可以使用

：before

内容生成项目符号：

li {
    list-style: none;
    font-size: 20px;
}

li:before {
    content:"·";
    font-size:120px;
    vertical-align:middle;
    line-height:20px;
}

演示：

标记仅限于显示在这个特定CSS的“内部”，尽管您可以更改它。这绝对不是最好的选择（浏览器必须支持生成的内容，所以没有IE6或IE7），但它可能是最简单的-而且你可以选择任何你想要的字符作为标记

---

如果您选择图像路径，请参见。

尝试对li和a使用不同的字体大小

.farpentdiv ul li{
列表样式类型：disc；
字体大小：20px；
}
法尔迪夫·乌尔·李先生{
字体大小：10px；
}

---

这使我不用使用图像而不用

位置：绝对值

，

文本缩进

可用于解决“内部”问题：

---

对我来说，最简单的方法是使用Unicode字符，然后使用span标记对其进行样式设置。为了这个例子，我将使用内联css，但是您可以用任何您喜欢的方式来实现它

当我想使用方形子弹并控制其颜色和大小时：

<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">&#9608;</span>&nbsp;&nbsp;HOME</a></li>

您可以在这里找到许多unicode项目符号：

---

我这样做是因为链接项目符号的图像对我来说似乎有点不必要。

您也可以使用2D变换。下面的代码片段对其进行了说明，列表的比例为25%

Nota：此处使用引导功能的唯一目的是布局演示（效果前/效果后）

---

ul#之前{
}
ul#之后{
转换：比例（1.25）；
}
分区容器，分区行{
填充：20px；
}
保险商实验室{
边框：6px实心#000000；
}

之前
之后（比例25%）

我爱你，我爱你
在前一级，前一级，后一级
在自由的基础上
Nam ut ante a sem mattis
发酵库拉索菌
未来的未来


我爱你，我爱你
在前一级，前一级，后一级
在自由的基础上
Nam ut ante a sem mattis
发酵库拉索菌
未来的未来

我很惊讶没有人提到列表样式图像属性

ul {
    list-style-image: url('images/ico-list-bullet.png');
}

---

我认为通过使用“内容”；如果太大，圆点会变得太方，因此我认为这是一个更好的解决方案，在这里，您可以在不影响字体大小的情况下决定“光盘”的大小

li{
列表样式：无；
显示：列表项；
左边距：50像素；
}
李：以前{
内容：“；
边界：5px#000固体！重要；
边界半径：50px；
边缘顶部：5px；
左边距：-20px；
位置：绝对位置；
}

看看这些例子！
这是一个例子
这是另一个示例

如果选择使用内联SVG渲染项目符号，则可以使用宽度和高度属性来控制其大小：

ul{
列表样式图像：url（“数据：image/svg+xml；utf8，”）；
}
.x{
列表样式图像：url（“数据：image/svg+xml；utf8，”）；
}
.x_备选方案{
列表样式图像：url（“数据：image/svg+xml；utf8，”）；
}

福
酒吧
巴兹


福
酒吧
巴兹


福
酒吧
巴兹

我正准备解释viewBox的工作原理

视图框是一个坐标系。

语法：

viewBox=“posX-posY-width-height”

viewBox=“0 0 4”

将创建此坐标系：

黄色区域是可见区域

因此，如果您想在其中居中放置某些内容，则需要使用

viewBox='-2-24'

我知道它看起来完全是弱智的，我也不明白他们为什么这样设计

ul{
列表样式图像：url（“数据：image/svg+xml；utf8，”）；
}
.x{
列表样式图像：url（“数据：image/svg+xml；utf8，”）；
}
.y{
列表样式图像：url（“数据：image/svg+xml；utf8，”）；
}
.z{
列表样式图像：url（“数据：image/svg+xml；utf8，”）；
}

Centered Circle（viewBox方法）[viewBox='-2-24'，Circle r='1']：

福
酒吧
巴兹

减小圆半径[viewBox='-2-24'，圆r='.5']：

福
酒吧
巴兹

将圆移近文本[viewBox='-3-24'，圆r='.5']：
<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">&#9608;</span>&nbsp;&nbsp;HOME</a></li>

ul {
    list-style-image: url('images/ico-list-bullet.png');
}

.farParentDiv ul li::marker {
  font-size: 0.8em;
}