我有 3 个带有“lorem ipsum”文本的内联 block 。
它们有标题和内容。
标题中的第一个字母，使用::first-letter，具有不同的颜色背景和边框半径。
但我无法正确对齐所有第一个字母，所以我为每个字母制作了“个人”padding 规则，如下所示:
.info.red .first::first-letter {
background-color: #f17c72;
padding: 0 18px 0 18px;
}
.info.gray .first::first-letter {
background-color: #aaaeb8;
padding: 0 15px 0 15px;
}
.info.blue .first::first-letter {
background-color: #33516b;
padding: 0 20px 0 20px;
}
我可以更轻松地设置跨度首字母的位置吗？
第二个问题是关于如何使文本靠近第一个字母并具有相同的边距(参见演示底部的图片)？
关于 Plnkr 两个问题的演示
最佳答案
您不能显示第一个字母 block ，因此每个字母的大小都不同，因为每个字母的大小都不同。不幸的是，您唯一的选择是将每个字母包装在一个可以显示的范围内: block 并将设置的宽度/高度设置为
关于position - 如何为 <span> 中的第一个字母制作边框半径并对齐它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23957067/