使用CSS自定义列表项符号

Question

使用CSS自定义列表项符号

58

能否改变 <li> 元素的标记大小？

请看下面的代码：

li {
    list-style: square; /* I want to change the size of this squared bullet. */
}

我似乎找不到任何实现这个的方法。

- Alex

2

你的意思是只需要 li 元素中的 'bullet' 部分，而不需要文本内容，对吗？ - chrisfrancis27

17个回答

48

_{基于@dzimney的回答，并类似于@Crisman的回答（但不同）}

那个回答很好，但存在缩进问题（项目符号出现在li范围内）。你可能不想要这个。请看下面的简单示例列表（这是默认的HTML列表）：

Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.
Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.

但是，如果您使用上述方法，列表将如下所示（忽略项目符号的大小）：

• Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.

• ~~Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.~~

因此，我推荐使用以下方法来解决这个问题：

li {
    list-style-type: none;
    position: relative;    /* It's needed for setting position to absolute in the next rule. */
}

li::before {
    content: '■';
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}

<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

- Mir-Ismaili

2

这应该是正确的答案。像魔法一样运作。 - MrVanilla

只是补充一下，您可能还需要设置 font-family 以确保项目符号正确呈现。例如，某些字体将圆形项目符号呈现为正方形。 - Alex Walker

这种方法的问题是子弹点不再垂直居中于文本上。 - undefined

25

你可以将 li 的内容包裹在另一个元素中，例如 span。然后，给 li 设置更大的 font-size，并在 span 上设置正常的 font-size：

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>

- thirtydot

2

经过更多的研究，这似乎是唯一的解决方案，前提是我不想使用背景图像代替<li>元素。 - Alex

4

可以，但需要将段落设置为垂直居中，并在项目符号选项中添加自定义缩进值以使文本与符号垂直对齐。 - Rebecca Meritz

这似乎是最易于维护且工作量最少的方法。只需两行CSS和在HTML中进行搜索和替换即可。谢谢！ - mattLummus

14

根据所需的IE支持级别，您还可以使用:before选择器，并将标记样式设置为content属性。

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

你可能需要查找想要的项目符号的HTML ASCII并使用转换器来获得CSS十六进制值。

- dzimney

1

这不够好：:before 伪元素将在文本流中，而不是分开在左侧，因此如果列表项有两行或更多行，它看起来会很丑。 - YakovL

10

您可以使用::marker CSS伪元素来设置列表的数字或者符号样式。截至2022年1月，Safari只支持颜色和字体大小。

例如：

::marker {
  color: red;
  font-size: 2rem
}

ul > li::marker {
  color: blue;
}

ol > li::marker {
  font-size: 1rem
}

<ul>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ul>
 
<ol>
  <li>Wake up</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

- Robert Kegel

5

改变列表符号大小的另一种方法是：

完全禁用列表符号
使用::before伪元素重新添加自定义列表符号。

例如：

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}

<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

不需要更改任何标记。

- Alex Lomia

首先，应该写作:before而非::before；第二，在dzimney的回答中有相同的问题：伪元素将在文本流中而不是被分离在左侧，因此如果列表项有两行或以上，这会看起来很丑。 - YakovL

1

伪元素使用双冒号而不是单冒号符号（伪类使用单冒号符号）。然而，我同意你的第二点。 - Alex Lomia

好的，感谢您指出这一点。自从我读过关于伪元素的文档（很久以前）以来，事情已经发生了变化，双冒号符号确实被推荐用于伪元素，尽管旧的单冒号符号为了向后兼容性而得到支持（https://www.w3schools.com/Css/css_pseudo_elements.asp）。 - YakovL

这个解决方案很好 - 对于控制项目符号的显示有足够的控制。您可以通过添加“border-radius: 100%”使项目符号变成圆形。 - benjaminhull

3

我猜你是指每个列表项开头的圆点的大小。如果是这样，你可以使用图像来代替它：

list-style-image:url('bigger.gif');
list-style-type:none;

如果您想改变 li 元素的实际大小，那么您可以像平常一样使用 width 和 height 来进行更改。

- James Allardice

3

不要再使用自定义字体、文件链接、CDN、Bootstrap技巧、Font-Awesome甚至JavaScript了！浏览器内置了成千上万个免费使用的Unicode图标、符号和表情符号，你只需在代码中输入一个小数字，就可以将它们作为CSS的项目符号。这就是UNICODE！

这是一个Unicode版本。它允许你在CSS的项目列表中插入任何文本符号或表情符号。你只需要知道Unicode的“代码点”值，这是免费提供的...而且现代浏览器本身就内置了成千上万个图标！只需搜索“unicode代码点”，然后将所需的图标粘贴到CSS中即可。

注意：在CSS中选择一个包含一系列Unicode字形的字体！大多数现代字体都支持广泛的字形范围，涵盖了大部分的高位平面Unicode代码点。但也可能会遇到一些不支持的字体。

<style>
#html_list{
    position: relative;
    margin-left: 1em;
    list-style: none;
}
#html_list li::before {
    display: inline-block;
    content: "\2023";/* <<< ADD YOUR UNICODE ICON NUMBER HERE */
    color: #114f66;
    font-size: 3rem;
    line-height: 0;
    padding: 0 .1em 0 0;
    margin: 0;
    text-align: left;
    vertical-align: top;
    position: relative;
    top: .2em;
    left: 0em;
}
#html_list li {
    text-align:left;
    vertical-align: top;
    padding: .2em 0em .2em 0em;
    margin: 0;
    font-size: 1rem;
}
</style>

<ul id="html_list">
    <li><a href="#">Area 1</a></li>
    <li><a href="#">Area 2</a></li>
    <li><a href="#">Area 3</a></li>
</ul>

在列表中使用Unicode或文本符号的主要问题是调整大小。即使您已经去除了高度、行高、填充和边距，但在使用字体大小调整大小后，符号仍然会有间距。这主要取决于您选择的字体。

我设计了上面最好的解决方案，通过使用伪元素将Unicode项目符号文本及其样式与其他列表文本分开。这个想法允许您在父无序列表中删除默认的列表样式项目符号，并在::before伪元素中插入一个新的Unicode项目符号。然后，您可以根据需要调整大小和重新定位它。一旦您将调整大小后的项目符号与列表文本对齐，您可以开始根据需要填充或调整列表文本的大小，而项目符号应该会随之移动。

- Stokely

1

如果您不想在您的 <li> 中使用 <span> 包装内容，您也可以像这样使用 :before：

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

在:before上调整字体大小，使其符合您的需求。

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>

- Crisman

1

自2011年以来，事情显然有了一些变化。今天，CSS提供了两种简单且得到良好支持的方法来自定义无序列表中的项目符号。

最近的一种方法是::marker伪元素。它允许您直接应用样式于任何标记，无论是符号还是数字。请参见Robert Kegel's answer以获取更详细的描述。

另一种方法看起来很简单。您只需将list-style-type属性设置为带引号的字符串，并选择任何Unicode字符即可。在此示例中，我选择了字符U+25A0（黑色正方形），它比标准正方形符号要大：

ul {
  list-style-type: square;
}
ul.big-bullets {
  list-style-type: "■  ";
}

<ul class="big-bullets">
  <li>Check out my square bullets!</li>
  <li>They are big, and perfectly aligned.</li>
  <li>And all it took was one very simple line of CSS.</li>
</ul>
<ul>
  <li>They <em>are</em> big bullets.</li>
  <li>I'm a little jealous.</li>
</ul>

在list-style-type属性上设置字符串的能力已经存在多年了，但浏览器支持需要一段时间才能跟上。根据Can I use，现在已经超过92％。

现在，您可能会认为您宁愿应用font-size而不是深入研究晦涩的Unicode字符，在这种情况下，您可以选择::marker方法。但请记住，这些项目符号字符仅在与其余文本相同的字体大小一起使用时才能很好地对齐。在我看来，首先选择正确的项目符号字符是正确的方法。如果您想要更精细的控制，当然可以同时使用两种技术。

- Kal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adc · Accepted Answer

51

你是指修改项目符号的大小，对吧？我认为这与 LI 标签的 font-size 相关。因此，你可以将 LI 的字体大小放大，然后对其中包含的元素进行缩小。添加额外的标记有点麻烦，但可以像这样实现：

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

或者，您可以为列表符号指定一个图像文件，该文件可以随意放大：

ul{
  list-style: square url("38specialPlusP.gif");
 }

参见：http://www.w3schools.com/css/css_list.asp

- adc

没错 - 正如 @dan 所提到的 - 对于自定义图像，您需要修改填充以适应。 - adc

在那种思路中，如果你想要创建一个正方形的 div 而不是圆点符号作为项目符号，我认为你也可以使用 CSS :before。 - Rolf

我查找了这个问题，因为我想将一个子弹图标应用为我的自定义项目符号样式。但是原始文件非常大。我希望浏览器可以调整大小，这样我就不必下载图像，调整大小，重新上传和重新热链接。 https://cdn2.iconfinder.com/data/icons/bullet-points/64/Bulletpoint_Bullet_Listicon_Shape_Bulletfont_Glyph_Typography_Bullet_Point_Customshape_Wingding_Custom_Star_Four_Square_Decoretive-512.png - Musixauce3000

2

我的看法 @Musixauce3000：我上了一门必修的网页设计课程，叫做“Web Graphics”。第一天他们教我们，文件越小越好。让浏览器调整网站会消耗用户的带宽（如果他们在移动设备上浏览，这是非常不利的），导致页面加载缓慢并消耗用户的数据计划。目前最佳实践（2016年8月）是下载文件，修改后再上传修改后的文件——正是你想要避免的。我希望有更简单的方法。不过，这是个很好的问题。 - Eric Hepperle - CodeSlayer2010