如何在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> 我知道我可以在li上应用font-size，这样光盘看上去对我很正确，然后把css应用到里面的“a”。 但我不知道为什么这不是在我工作的网站上工作。 我无法直接控制html。
我看到，当我这样做：
.farParentDiv ul li { list-style: disc inside none; }
对此：
.farParentDiv ul li { list-style-type: disc; font-size:10px; }
现在在将字体大小应用到“a”之后，它在Firebug中起作用。 但从我的CSS文件。 我尝试了很多，但很累。 我可以覆盖上面的这个在CSS文件，但不能像我在萤火虫那样直接改变它。 请写下可能是什么问题？
我曾经在连接内部之前把点（。），然后申请CSS来控制光盘的大小，但正如我所说，我无法控制的HTML。
我一直有使用背景图像的好运，而不是相信所有浏览器以完全相同的方式解释子弹。 这也会让你严格控制子弹的大小。
.moreLinks li { background: url("bullet.gif") no-repeat left 5px; padding-left: 1em; }
另外，你可能想把你的DIV移到UL之外。 这是无效的标记，因为你现在。 如果您必须在列表中使用列表标题，则可以使用列表标题LH 。
由于我不知道如何只用CSS来控制列表标记的大小，而且还没有人提供这个function，所以可以:before内容生成: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“内部”出现，尽pipe你可以改变它。 这绝对不是最好的select（浏览器必须支持生成的内容，所以没有IE6或7），但它可能是最简单的 – 再加上你可以select任何你想要的标记字符。
如果你去图像路线，请参阅list-style-image
除了为项目符号使用自定义图像之外，还可以用一种方法设置ul或li元素的样式，然后以不同方式设置内容的样式， 如此处所示 。
好处是一方面缺乏图像，另一方面是增加的控制。 缺点是它倾向于涉及非语义标记，除非在这种情况下锚已经被需要。
尝试使用不同的字体大小为李和a
.farParentDiv ul li { list-style-type: disc; font-size:20px; } .farParentDiv ul li a { font-size:10px; }
这使我免于使用图像
而不是使用position: absolute ，可以使用text-indent来解决“内部”问题：
li { list-style: inherit; margin: 0 0 4px 9px; text-indent: -9px; } li:before { content: "· "; }
最简单的方法是使用Unicode字符，然后使用span标签进行devise。 为了示例，我将使用内联css，但是您可以按照您喜欢的方式进行操作。
例如。 当我想要使用方形子弹并控制其颜色和大小时：
<li style="list-style:none;"><a href=""><span style="font-size:x-small;vertical-align:middle;">█</span> HOME</a></li>
你可以在这里find很多unicode项目符号：
我这样做是因为为子弹链接图像似乎对我来说有点不必要。
我很惊讶没有人提到过list-style-image属性
ul { list-style-image: url('images/ico-list-bullet.png'); }
我想通过使用内容“。”; 如果太大，点太平方，所以我相信这是一个更好的解决scheme，在这里你可以决定“光盘”的大小，而不会影响字体大小。
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>
您也可以使用2D变换。 在下面的片段中列举了一个列表，缩放了25％。
注意 ： Bootstrap在这里用于布局演示的唯一目的（之前/之后的效果）。
ul#before { } ul#after { transform: scale(1.25); } div.container, div.row { padding: 20px; } ul { border: 6px solid #000000; }
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Bootstrap theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- HTML --> <div class="container"> <div class="row"> <div class="col-xs-5"> Before </div> <div class="col-xs-5 col-xs-offset-1"> After (scale 25%) </div> </div> <div class="row"> <div class="col-xs-5"> <ul id="before"> <li>Lorem ipsum dolor sit amet...</li> <li>In vel ante vel est accumsan...</li> <li>In elementum libero vel...</li> <li>Nam ut ante a sem mattis...</li> <li>Curabitur fermentum nisl...</li> <li>Praesent vel risus ultrices...</li> </ul> </div> <div class="col-xs-5 col-xs-offset-1"> <ul id="after"> <li>Lorem ipsum dolor sit amet...</li> <li>In vel ante vel est accumsan...</li> <li>In elementum libero vel...</li> <li>Nam ut ante a sem mattis...</li> <li>Curabitur fermentum nisl...</li> <li>Praesent vel risus ultrices...</li> </ul> </div> </div> </div> <!-- JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
