Question

是否可以更改<li>元素的项目符号的大小？

看看下面的代码：

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

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

Answer 1

你认为你的意思是改变子弹的大小？我相信这与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

Answer 2

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

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>

Answer 3

基于@dzimney answer，类似于@Crisman answer（但不同）：

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

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

所以我推荐这种解决问题的方法：

＆＃13;

li {
    list-style-type: none;
    position: relative;    /* It is required for setting position to absolute in the next rule. */
}

li::before {
    content: '\2022';      /* Unicode for • character */
    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. */
}

＆＃13;

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

＆＃13;

Answer 4

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

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

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

您可能需要查找所需子弹样式的HTML ASCII，并使用converter作为CSS Hex值。

Answer 5

更改项目符号大小的另一种方法是：

完全禁用子弹
借助::before伪元素重新添加自定义项目符号。

示例：

＆＃13;
＆＃13;
ul { list-style-type: none; } li::before { display: inline-block; vertical-align: middle; width: 5px; height: 5px; background-color: #000000; margin-right: 8px; content: ' ' }
＆＃13;
<ul> <li>first element</li> <li>second element</li> </ul>
＆＃13;
＆＃13;
＆＃13;

无需更改标记

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

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

或

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

Answer 9

如果您将<li>内容包装在<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>

结果：

Answer 10

如果您不想使用<li>将<span> 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>

Answer 11

我刚刚找到了一种我认为效果很好的解决方案，并且解决了自定义符号的所有陷阱。 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:          ' '
}

Answer 12

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

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

Answer 13

这是一个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 伪元素。然后，您可以根据需要调整大小和重新定位。将已调整大小的项目符号与列表文本对齐后，您就可以根据需要开始填充或调整列表文本的大小，项目符号应随之移动。

Answer 14

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

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自定义列表项目项目符号

14 个答案: