Question

我想创建一个简单的列表（没有图像）列表中最后一个元素的第一个字母应该是“vertical-align：super;”风格，但当我这样做时，段落的高度正在增加。

#third::first-letter {
    vertical-align: super;
}

如何在不知道字体大小和段落高度的情况下修复它？ My fiddle

Answer 1

在不影响框高度的情况下垂直移动::first-letter的一个可能选项是float伪元素并向其提供否定margin-top：

<强> Example Here

#third::first-letter {
    margin-top: -.5em;
    float: left;
}

＆＃13;

* {margin:0;padding:0;}
html {font-size: 200%;}
#first {background-color:pink;}
#second {background-color:aqua;}
#third {background-color:lightgreen; margin-top: 1em;}

#third::first-letter {
    margin-top: -.5em;
    float: left;
}

＆＃13;

<p id="first">My list:</p>
<p id="second">|-> not last element</p>

<p id="third">|-> last element</p>

＆＃13;

但正如@Alohci在评论中指出的那样，在Firefox ::first-letter中，如果它不是字母或数字，则与第一个字符不匹配。

因此，在第一个字符不是字母/数字而是管道|的特殊情况下，我们最好使用::before伪元素添加该字符，以便我们可以正确地设计它：

<强> Example Here

#third::before {
    content: "|";
    margin-top: -.5em;
    float: left;
}

＆＃13;

*{margin:0;padding:0}
html {font-size: 200%;}
#first{background-color:pink;}
#second{background-color:aqua;}
#third{background-color:lightgreen; margin-top: 1em;}

#second::before,
#third::before {
    content: "|";
}

#third::before {
    margin-top: -.5em;
    float: left;
}

＆＃13;

<p id="first">My list:</p>
<p id="second">-> not last element</p>

<p id="third">-> last element</p>

＆＃13;

Answer 2

而不是negative margin-top，line-height是更好的解决方案。使用line-height信函下方没有空格。

CSS3：第一个字母，垂直对齐：超级和更改高度

2 个答案: