Question

我试图增加li元素旁边的项目符号点的大小。共识似乎是这样做的方法是删除＆＃34;标准＆＃34;指向，使用:before选择器插入自定义的一个，并增加插入点的字体大小。

嗯，这种作品，但它意味着文字和点变得不对齐。有关我的代码，请参阅here。

有没有办法解决这个问题并不仅仅依赖于硬编码，因为文本需要向下移动多少像素？

Answer 1

使用position:absolute

设置项目符号

section {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  width: 300px;
}
ul {
  font-family: 'Segoe UI';
  list-style: none;
  padding: 0;
}
li {
  font-size: 22px;
  line-height: 40px;
  position: relative;
  padding-left: 30px;
}
li::before {
  content: "\2022";
  font-size: 70px;
  vertical-align: middle;
  position: absolute;
  left: 0;
}

<section>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</section>

Answer 2

我显示为inline-table并更改line-height。

section{
  border: 1px solid black;
  display: flex;
  justify-content: center;
  width: 300px;
}

ul{
  font-family: 'Segoe UI';
  list-style: none;
  padding: 0;
}
li{
  font-size: 22px;
  line-height: 40px;
}
li::before{
  content: "\2022";
  font-size: 70px;
  vertical-align: middle;
  display: inline-table;
  line-height: 0.4em;
}

<section>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</section>

将自定义li项目符号与文本对齐

2 个答案: