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

Question

我想沿着具有以下结构的div容器创建路线。有3个按钮和一个span元素，但是如果需要，可以将其替换为其他元素。

我开始创建这个

body {
  margin: 0;
  background-color: #222222;
}

.todoContainer {
  display: flex;
  align-items: center;
  outline: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px dotted #666666;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.todoContent {
  font-size: 25px;
  color: #ffffff;
}

.btnTodoAction {
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 40px;
  border: 0;
  background: #2a2a2a;
  color: #555555;
}

.todoIsCompleted>.todoContent {
  position: relative;
  color: #666666;
}

.todoIsCompleted>.todoContent::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid #85bf6b;
}

.todoIsCompleted>.btnToggleTodoState {
  color: #85bf6b;
}

<div class="todoContainer">
  <button class="btnTodoAction btnToggleTodoState">T</button>
  <span class="todoContent">Item 1</span>
  <button class="btnTodoAction">E</button>
  <button class="btnTodoAction">D</button>
</div>

<div class="todoContainer todoIsCompleted">
  <button class="btnTodoAction btnToggleTodoState">T</button>
  <span class="todoContent">Item 2</span>
  <button class="btnTodoAction">E</button>
  <button class="btnTodoAction">D</button>
</div>

并尝试将float: right添加到右侧的按钮上，但它们没有粘在右侧。

如何实现？ （使用display: grid的解决方案也可以）

Answer 1

我已经编辑了您的代码，这是您期望的，请看看 我使用position样式通过将两个button放在一个div <div class="pushRight">中来使其正确对齐，并为该div添加了样式

body {
  margin: 0;
  background-color: #222222;
}

.todoContainer {
  display: flex;
  align-items: center;
  outline: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px dotted #666666;
  padding-bottom: 5px;
  margin-bottom: 15px;
  position: relative;
}

.todoContent {
  font-size: 25px;
  color: #ffffff;
}

.btnTodoAction {
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 40px;
  border: 0;
  background: #2a2a2a;
  color: #555555;
}
.pushRight{
  position: absolute;
  right:0
}

.todoIsCompleted>.todoContent {
  position: relative;
  color: #666666;
}

.todoIsCompleted>.todoContent::before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid #85bf6b;
}

.todoIsCompleted>.btnToggleTodoState {
  color: #85bf6b;
}

<div class="todoContainer">
  <button class="btnTodoAction btnToggleTodoState">T</button>
  <span class="todoContent">Item 1</span>
  <div class="pushRight">
  <button class="btnTodoAction">E</button>
  <button class="btnTodoAction">D</button>
  </div>
</div>

<div class="todoContainer todoIsCompleted">
  <button class="btnTodoAction btnToggleTodoState">T</button>
  <span class="todoContent">Item 2</span>
   <div class="pushRight">
  <button class="btnTodoAction">E</button>
  <button class="btnTodoAction">D</button>
  </div>
</div>

Answer 2

我们可以使用float来实现，请检查sample code。

此处添加了floating而不是display:flex

为右对齐添加了一个类

.pull-right{ float:right; } 它将在

中调用

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