Question

我有3个带有“lorem ipsum”文本的内嵌块他们有标题和内容标题中的第一个字母使用::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

上同时演示这两个问题

Answer 1

您无法显示第一个字母的块，因此每个字母的大小不同，因为每个字母的大小不同。不幸的是，你唯一的选择是将每个字母包裹在你可以显示的范围内：阻止并给出设定的宽度/高度

Answer 2

在这里，对你的代码进行了一些处理，它似乎工作得很好，如果你把它们放在左边浮动，第一行的文字会漂浮在字母的左边，每个第一个字母的宽度都相同。不需要为每个人定制填充。


    .info .first::first-letter {
        border-radius: 100%;
        font-size: 50px;
        color: #f4f2f0;
        float: left;
        margin: -10px 5px 0 0;
        width: 60px;
        height: 60px;
        text-align: center;
    }


    .info span {
        font-weight: bold;
        display:block;
        clear:both;
        margin-bottom:20px;
    }

    .info.red .first::first-letter {
        background-color: #f17c72;

    } 

    .info.gray .first::first-letter {
        background-color: #aaaeb8;

    } 

    .info.blue .first::first-letter {
        background-color: #33516b;
    }

如何为<span>中的第一个字母创建边框半径并对齐</span>

2 个答案: