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

Question

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

我知道我可以在li上使用font-size非常小,以便光盘对我来说正确,然后将css应用到li里面的"a".但我不知道为什么这不适用于我工作的网站.我无法直接控制html.

当我做到这一点时,我看到了

.farParentDiv ul li {
    list-style: disc inside none;
}

对此:

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

现在将font-size应用于"a"后,它可以在Firebug中运行.但是来自我的css文件.我尝试了很多但累了.我可以在css文件中覆盖上面这个但不能像我在firebug中那样直接更改它.请写出可能出现的问题？

我曾经在链接里面放点(.)然后在其上应用css来控制光盘大小,但正如我所说,我无法控制HTML.

Answer 1

由于我不知道如何使用CSS仅控制列表标记大小并且还没有人提供此类,因此您可以使用:before内容生成项目符号:

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

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

演示:http://jsfiddle.net/4wDL5/

标记仅限于使用此特定CSS出现在"内部",尽管您可以更改它.它绝对不是最好的选择(浏览器必须支持生成的内容,所以没有IE6或7),但它可能是最简单的 - 另外你可以选择任何你想要的标记.

如果你去图像路线,请参阅 list-style-image

Answer 2

在现代浏览器中，您可以使用::marker CSS 伪元素，如下所示：

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

浏览器支持请参考：我可以使用::marker伪元素吗

Answer 3

我一直很幸运使用背景图像而不是信任所有浏览器以完全相同的方式解释子弹.这也可以让你严密控制子弹的大小.

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

此外,你可能想要移动你的DIV外面UL.你现在拥有它是无效的标记.LH如果必须在列表中包含列表标题,则可以使用列表标题.

Answer 4

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

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

.farParentDiv ul li a {
   font-size:10px;
}

这使我免于使用图像

Answer 5

如果选择使用嵌入式SVG渲染项目符号，则可以使用width和height属性来控制其大小：

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>");
}

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Answer 6

我正在建立Kolja 的答案，以解释 viewBox 的工作原理

viewBox 是一个坐标系。

句法： viewBox="posX posY width height"

viewBox="0 0 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) [viewBox='-2 -2 4 4', circle r='1']:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Decrease Circle Radius [viewBox='-2 -2 4 4', circle r='.5']:

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Move Circle Closer to Text [viewBox='-3 -2 4 4', circle r='.5']:

<ul class="y">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

...even closer (use float values) [viewBox='-3.5 -2 4 4', circle r='.5']:

<ul class="z">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

但是有一个更简单的方法，您可以只使用圆圈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 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='20']:

<ul class="centered_a">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Centered Circle (cx/xy) Radius 10 [viewBox='0 0 100 100', circle cx='50%' cy='50%' r='10']:

<ul class="x">
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>