css - 右对齐的 BS header

Question

我想在右侧的标题中添加一个额外的小元素，该元素与右侧对齐，如下所示:

<h1>Header<small>subheader<span class="pull-right">subheader right</span></small></h1>

但是右侧的 span 元素放置得更高/与第一个小元素不在一条直线上。我做错了什么？

我不想使用 css 网格。

Answer 1

这就是你能做的。

h1{
    display: flex;
    width: 100%;
    align-items: center;
}
small{
    display: flex;
    width: 100%;
}
span{
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

您可以从 span 中删除 pull right 类。