css - 使用 CSS 自定义列表项项目符号

Question

是否可以更改<li>元素子弹的大小？

看看下面的代码：

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

我似乎找不到任何方法来实现这一目标。

score 46 · Accepted Answer

你的意思是改变子弹的大小，我猜？我相信这与 li 标签的字体大小有关。因此，您可以放大 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

score 36 · Accepted Answer

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

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

Lorem ipsum dolor sit amet，ei cum offendit partiendo iudicabit。在 mei quaestioHonestatis，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。在 mei quaestioHonestatis，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>

score 25 · Accepted Answer

您可以将的内容包装li在另一个元素中，例如 a span。然后，给li一个更大的，并在上font-size设置一个法线：font-sizespan

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>

score 13 · Accepted Answer

根据所需的 IE 支持级别，您还可以使用 :before 选择器并将项目符号样式设置为内容属性。

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

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

您可能需要查找您想要的项目符号样式的HTML ASCII并使用CSS 十六进制值的转换器。

score 5 · Accepted Answer

另一种改变子弹大小的方法是：

完全禁用子弹
借助::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>

无需更改标记

score 3 · Accepted Answer

我假设您的意思是每个列表项开头的项目符号的大小。如果是这种情况，您可以使用图像代替它：

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

如果您指的是li元素的实际大小，那么您可以使用width和正常更改它height。

score 1 · Accepted Answer

您可以使用 ::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>

score 1 · Accepted Answer

如果您不想<li>用<span>s 包装 s 中的内容，也可以: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>

score 0 · Accepted Answer

<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>

score 0 · Accepted Answer

您必须使用图像来更改子弹本身的实际大小或形式：

您可以使用具有适当填充的背景图像来微调内容，使其不重叠：

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

或者

background-image: url(images/bullet.gif);

score 0 · Accepted Answer

这是一个Unicode 版本。这个允许您将任何您喜欢的文本符号或表情符号放入您的 CSS 项目符号列表中。您所需要的只是 Unicode“代码点”值。

<style>
#html_list{
    position: relative;
    margin-left: 1em;
    list-style: none;
}
#html_list li::before {
    display: inline-block;
    content: "\2023";
    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 或文本符号的主要问题是调整大小。即使您去除了高度、行高、填充和边距，符号在使用字体大小调整大小后仍有间距。其中大部分是基于您选择的字体。小心并在 CSS 中选择具有一系列 Unicode 字形的字体。

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

score 0 · Accepted Answer

我刚刚找到了一个我认为非常有效的解决方案，并且解决了自定义符号的所有缺陷。li:before 解决方案的主要问题是，如果列表项长于一行，则不会在第一行文本之后正确缩进。通过使用带有负填充的 text-indent 我们可以规避该问题并使所有行正确对齐：

ul{
    padding-left: 0; // remove default padding
}

li{
    list-style-type: none;  // remove default styles
    padding-left: 1.2em;    
    text-indent:-1.2em;     // remove padding on first line
}

li::before{
    margin-right:     0.5em; 
    width:            0.7em; // margin-right and width must add up to the negative indent-value set above
    height:           0.7em;

    display:          inline-block;
    vertical-align:   middle;
    border-radius: 50%;
    background-color: orange;
    content:          ' '
}

score 0 · Accepted Answer

此方法将光盘移出原始光盘所在的文本流，但可以调整。

ul{
    list-style-type: none;
    
    li{ 
        position: relative;
      }
    li:before {
        position: absolute;
        top: .1rem;
        left: -.8em;
        content: '\2022';
        font-size: 1.2rem;
    }
}

score 0 · Accepted Answer

如果您将<li>内容包装在 a<span>或其他标签中，您可以更改的字体大小<li>，这将更改项目符号的大小，然后将的内容重置<li>为其原始大小。您可以使用单位按比例em调整项目符号的大小。<li>

例如：

<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

然后CSS：

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

一个更复杂的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List Item Bullet Size</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
ul.disc li {
    list-style-type: disc;
    font-size: 1.5em;
}

ul.square li {
    list-style-type: square;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}
    </style>
</head>
<body>

<h1>First</h1>
<ul class="disc">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

<h1>Second</h1>
<ul class="square">
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>

</body>
</html>

结果是：

score 0 · Accepted Answer

还没有看到提到过这种技术。它基本上允许你有一个你想要的任何大小的“点”。它使用圆形边框来绘制圆形。

li {
    list-style-type: none;
    position: relative;
    margin-left: 2.5rem;
}

li:before {
    content: " ";
    border: 1rem solid #1b1b1b;
    border-radius: 99rem;
    height: 0; /* it's all controlled by the border */
    width: 0;
    margin-top: -0.4rem;
    margin-left:  -2.5rem;
    position: absolute;
}

css - 使用 CSS 自定义列表项项目符号

15 回答 15

Related

Reference