CSS 列表标记未与文本内联

Question

我玩过所有主流浏览器都支持的 ::marker。

更改字体大小时，我注意到标记/项目符号与文本不一致。对于内联，我的意思是项目符号的顶部应该与文本的顶部内联。

我试过重置边距和边距，但没有成功。

有没有办法在不缩小子弹的情况下解决这个问题，并且仍然使用 ::marker？

ul {
  margin: 0;
  padding: 0;
  margin-left: 4rem;
}

li::marker {
  margin: 0;
  padding: 0;
  font-size: 5rem;
}

<ul>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
</ul>

Answer 1

这很可能是由于文本的页边空白，因为这是将那些要点移开的原因。您是否尝试删除 ul{} 属性然后运行它？

Answer 2

遗憾的是，目前无法指定 ::marker 的 padding 或 margin。根据规范，allowable properties 是：

全部font-properties
white-space,
color
text-combine-upright、unicode-bidi 和 direction
content
所有 animation and transition 属性。

不支持任何其他内容，至少目前是这样。您不能使用 margin、padding、position、top/left/...。

如果您需要对标记进行更多控制，请使用 list-style-type: none 并使用 :before（适用于大多数用例）或简单地在每个 <li> 的内容前加上 <div class="marker"></div>，让您完全控制：

li { list-style-type: none; }
li>.marker {
  /* go wild... */
}

示例：

ul {
  list-style-type: none;
  padding-left: 0;
}
li {
  padding-top: .5rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
li:before {
  font-size: 5rem;
  margin-top: -.5rem;
  content: '•';
  display: flex;
  justify-content: flex-end;
  flex: 0 0 .6em;
  line-height: .4em;
  padding-right: .2em;
}

<ul>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
  <li>More chocolate.</li>
  <li>Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll. Chocolate bar chocolate bar sweet roll caramels oat cake marzipan chocolate apple pie shortbread. Halvah donut jelly beans pie liquorice brownie gummi bears marzipan cotton candy. Cake pudding bonbon liquorice sweet roll.</li>
</ul>

CSS 列表标记未与文本内联

CSS list marker not inline with text

css

list

marker