Html 沿父容器对齐多个粘性元素

我想用以下结构沿div容器创建一个对齐。有3个按钮和一个

span

元素，但如果需要，可以用其他元素替换

我开始创造这个

正文{
保证金：0；
背景色：#22222；
}
.todoContainer{
显示器：flex；
对齐项目：居中；
大纲：无；
边界：0；
边界半径：0；
边框底部：1个点#666666；
垫底：5px；
边缘底部：15px；
}
.托多内容{
字体大小：25px；
颜色：#ffffff；
}
B.行动{
光标：指针；
文本对齐：居中；
文字装饰：无；
大纲：无；
宽度：40px；
高度：40px；
填充：8px；
边界半径：40px；
边界：0；
背景：#2a2a；
颜色：#555555；
}
.todoIsCompleted>.todoContent{
位置：相对位置；
颜色：#666666；
}
.todoIsCompleted>.todoContent:：之前{
位置：绝对位置；
内容：“；
左：0；
最高：50%；
右：0；
边框顶部：2个实心#85bf6b；
}
.todoIsCompleted>.btntogletoState{
颜色：#85bf6b；
}

T
项目1
E
D
T
项目2
E
D

我已经编辑了你的代码，这是你想要的，请看一看 我使用了

位置

样式，通过在一个div中放置两个

按钮

，使其右对齐，并为该

div添加了样式

正文{
保证金：0；
背景色：#22222；
}
.todoContainer{
显示器：flex；
对齐项目：居中；
大纲：无；
边界：0；
边界半径：0；
边框底部：1个点#666666；
垫底：5px；
边缘底部：15px；
位置：相对位置；
}
.托多内容{
字体大小：25px；
颜色：#ffffff；
}
B.行动{
光标：指针；
文本对齐：居中；
文字装饰：无；
大纲：无；
宽度：40px；
高度：40px；
填充：8px；
边界半径：40px；
边界：0；
背景：#2a2a；
颜色：#555555；
}
普希特先生{
位置：绝对位置；
右：0
}
.todoIsCompleted>.todoContent{
位置：相对位置；
颜色：#666666；
}
.todoIsCompleted>.todoContent:：之前{
位置：绝对位置；
内容：“；
左：0；
最高：50%；
右：0；
边框顶部：2个实心#85bf6b；
}
.todoIsCompleted>.btntogletoState{
颜色：#85bf6b；
}

T
项目1
E
D
T
项目2
E
D

我们可以使用float来实现这一点，请检查

这里添加了

浮动

而不是

显示：flex

为右对齐添加了一个类

。向右拉{
浮动：对；
}

它将被召集进来

<button class="btnTodoAction pull-right">D</button>
<button class="btnTodoAction pull-right">E</button>

D
E

我认为您只需要在span中添加

flex-grow:1

。你应该仔细阅读flexbox。我发现这是一个有用的概述。是的，这似乎是一个很好的解决方案，但你知道如何修复笔划线吗？因为这一个会和集装箱一样大，如果它的样式不会太花哨，你可以使用

文本装饰：绿色线条通过
。如果要将其保存在
：before
中，对于更复杂的内容，可以将实际文本和
：before
放在嵌套元素中<代码>span.todoContent>span.todocontext:before