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

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

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

此外，您可能希望将DIV移到UL之外。你现在拥有它是无效的标记。如果必须在列表中包含它，可以使用列表标题LH。

Answer 3

我正在研究Kolja's answer，以解释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>

Answer 4

除了为子弹使用自定义图像之外，您还可以单独设置ul或li元素的样式，然后以不同的方式设置内容样式as seen here。

好处是缺少一件事的图像，以及增加的控制。缺点是它往往涉及非语义标记，除非在这种情况下需要锚点。

Answer 5

如果您选择使用嵌入式SVG来显示子弹，则可以使用 width 和 height 属性来控制其大小：

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    let cell = tableView.cellForRow(at:indexPath) as! CellClassName

    cell.titleLbl = //////  suppose here the outlet is titleLbl

    // reflect this to model array to avoid reusing issues when you scroll
}

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

Answer 6

尝试为li和

使用不同的字体大小

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

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

这使我免于使用图像

Answer 7

在现代浏览器中，您可以像这样使用 ::marker CSS 伪元素：

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

浏览器支持请参考：Can I Use ::marker pseudo-element

Answer 8

我认为通过使用内容＆＃34;。＆＃34 ;;如果做得太大，点变得过于平方，因此我相信这是一个更好的解决方案，在这里你可以决定＆＃34;盘＆＃34;而不影响字体大小。

＆＃13;

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

＆＃13;

<h2>Look at these examples!</h2>
<li>This is an example</li>
<li>This is another example</li>

＆＃13;

您可以通过编辑边框px的大小来编辑磁盘的大小。你可以调整到文本的距离多少 - 你给它留下的余量。以及通过编辑边距顶部来调整y位置。

Answer 9

而不是使用position: absolute，text-indent可用于解决“内部”问题：

li {
    list-style: inherit;
    margin: 0 0 4px 9px;
    text-indent: -9px;
}
li:before {
    content: "· ";
}

http://jsfiddle.net/poselab/zEMLG/

Answer 10

最简单的方法是使用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项目符号：

http://unicode-table.com/

我这样做是因为连接子弹的图像对我来说似乎有点不必要。

Answer 11

我很惊讶没有人提到list-style-image属性

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

Answer 12

这里我附上了我的解决方案，它也可以完美地响应响应，您可以非常轻松地控制子弹的大小。

body {
  font-family: Arial;
}

ul {
  list-style: none;
}

li {
  padding-left: 15px;
  font-size: 14px;
  margin-bottom: 10px;
  line-height: normal;
}

ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  vertical-align: middle;
  background-color: pink;
  border-radius: 100%;
  margin-right: 10px;
  margin-left: -15px; /* Same negative margin as li padding  */
}

<div><h3>More from Travelandleisure.com</h3></div>

<ul class="moreLinks" >
    <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>

<h3>My example with lengthy text to show more clear result</h3>

<ul>
  <li>Quisque nibh mauris</li>
  <li>hired in he unable his thing rung and, in that films recommendation of the writing poster meticulous rewritten value comment finally, a the that low necessary fellow take fail then hope up, nor may needs better orthographic put took derisively to trumpet
    covered her be the offer, hotel would differences material. With mild, fact, the slide and, furnished as than with to the he she sides from where represent principles, in this ran derivative found was step after how to case privilege text a he tone
    inn so two through well, on is at knows, help people.</li>
  <li>Dictum lacinia dui</li>
  <li>Vestibulum dignissim imperdiet</li>
</ul>

谢谢

Answer 13

您也可以使用2D变换。它在下面的代码段中有一个列表缩放25％。

Nota ：此处使用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>

参考：

CSS3 2D transform: compatibility matrix

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

13 个答案: