Html 如何右对齐div中的单个子级

我有一个div，它有两个子元素。一个跨度和一个div包含一个X。我的目标是右对齐X

它应该是什么样子

我试过和的建议，但没有任何运气

我试过的

- float:right;
- margin-left: auto;

---

任何提示或建议都将不胜感激

CSS太多，无法为如此简单的对象设置样式。无论如何

添加

位置：相对至
#DIV_1{

将

位置：绝对；

和

右侧：7px；

添加到

#DIV_3{

---

可以做的是在父级（div）上使用

显示：grid

，共有两列。第一列设置为

auto

，第二列设置为

1fr

，以使用所有剩余空间。将列内容向右对齐（

对齐项目：end

），然后看；-）

/*新的CSS代码*/
div{
显示：网格；
网格模板列：自动1fr；
证明项目：结束；
}
/*来自原始小提琴的简化代码*/
div{
边界半径：6px；
框大小：边框框；
高度：16px；
宽度：67.5781px；
背景色：rgb（179229255）；
字体：600 12px/12px“源代码无专业版”，Helvetica，Arial，无衬线；
填充：2px6px；
}
跨度{
颜色：rgb（15,27,49）；
}
a{
颜色：rgb（0,85,139）；
}

天
X

您只需将display flex属性添加到DIV中，并减少左边的填充，以便x始终位于DIV的末尾：

  display: flex;
  flex-direction: row;
  justify-content: space-between;

---

这里有很多CSS，它们掩盖了它真正想要的东西。你需要它吗？它已经11岁了！第一个链接已经3岁了。忘记浮动（至少对于布局而言）使用display:flex或display:grid。在您的情况下，grid将是我的第一个choice@CedricCholley一个问题的年龄无关紧要。这个11年的问题是有效的，并且将在11年后继续有效now@TemaniAfif在某些情况下，问题可能会持续11年甚至更长时间，你是对的。这不是一种情况，CSS已经改变了很多过去……不到11年。现在应该避免使用

float

来创建布局，有（多得多）更好的方法：

flex

和

grid

@CedricCholley我邀请你阅读这个问题（看起来你没有）