CSS列表标记不与文本内联

发布于 2025-01-22 02:27:17 字数 1002 浏览 2 评论 0 原文

我玩了 :: 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>

原文

I played around with ::marker which is supported by all major browsers.

When changing the font size I noticed that the marker / bullet is not inline with the text. With inline I mean that the top of the bullet should be inline with the top of the text.

I tried resetting paddings and margins without luck.

Is there a way to fix this without making the bullet smaller and still use the ::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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月下凄凉 2025-01-29 02:27:17

不幸的是，目前，无法指定 :: Marker 's padding 或 Margin 。根据规格，

all font-properties font-properties
，
color
text-combine intright ， unicode-bidi and code>方向方向
content
全部 transition properties。

至少现在不支持其他任何东西。您不能使用保证金，填充， position ， top/left/left /... 。

如果您需要对标记的更多控制权，请使用 list-style-type：none ，并且使用：之前（适用于大多数用例），或者简单地将每个内容的内容列为每个内容＆lt; li＆gt; 带有＆lt; div class =“ marker”＆gt;＆lt;/div＆gt; ，它为您提供完整的控制：

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>

Unfortunately, at the moment, there is no way to specify ::marker's padding or margin. According to the spec, the allowable properties are:

all font-properties
white-space,
color
text-combine-upright, unicode-bidi and direction
content
all animation and transition properties.

Anything else is not supported, at least for now. You can't use margin, padding, position, top/left/....

If you need more control over your markers, use list-style-type: none and either use :before (works for most use cases) or simply prefix the contents of each <li> with a <div class="marker"></div>, which gives you full control:

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

Example:

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>

回复收藏 0 原文

~没有更多了~