:关于li元素的第一个字母 [英] :first-letter on li elements

问题描述

我正在尝试在导航菜单上使用:first-letter伪元素.

I'm trying to use a :first-letter pseudo element on a navigation menu.

HTML，例如:

<nav>
    <ul>
        <li>Navigation</li>
        <li>Navigation</li>
        <li>Navigation</li>
        <li>Navigation</li>
    </ul>
</nav>

和CSS一样:

nav li:first-letter {font-size: 150%;}

我也尝试过

nav ul li:first-letter {font-size: 150%;}

没有帮助.

如果我将其调整为

ul

> 标签上的第一个元素，则可以看到它工作:

I can see it working for the first element on the <ul> tag if I adjust it to this:

nav ul:first-letter {font-size: 150%;}

但是仍然不能完全得到我所需要的；< li> 的行内，其第一个字符大于其他字符.

but still can't get exactly what I need; <li>'s inline whose first character is larger than the others.

推荐答案

因为您的 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演示

这篇关于:关于li元素的第一个字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！