且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

:关于li元素的第一个字母

更新时间:2023-02-05 14:20:39

因为您的 li 元素都是内联的(假设您使用的是 display:inline 样式,如图所示),:first-letter 伪元素只会从整行嵌入式文本中挑选出第一个字母.这就是为什么 ul:first-letter 有效,而 li:first-letter 无效的原因.

Because your li elements are all flowing inline (assuming you have a display: inline style that's not shown), the :first-letter pseudo-element will only pick up the very first letter out of that entire chunk of inline text. That is why ul:first-letter works, but li:first-letter does not.

请尝试使列表项成为内联块,以便它们继续在其自己的框中包含其文本,而这些框本身却是内联的.如有必要,将它们的边距和边距清零.

Try making your list items inline blocks instead, so they continue to contain their text within their own boxes, while these boxes themselves flow inline. If necessary, zero out their margins and padding.

jsFiddle演示