Html 如何使用：last child pseudo将特定元素向右对齐

看这把小提琴

我需要将粗体日期值与父容器的右侧对齐。使用：last-child伪元素如何调整css以实现这一点？我在下面的css中对此进行了尝试

HTML

<div class="editIssueForm">
    <div class="commentContainer">
        <div>
            <div class="comment">
                <div>
                    <span>Entered by: Paul Reid</span>
                    <span>4/3/2013 3:45 PM CST</span>
                </div>
                <div>ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar, lectus vitae rutrum accumsan, ligula mauris bibendum magna, vel vestibulum erat ante vel metus. Integer blandit, libero eu dignissim pellentesque, massa lectus placerat mi, eu adipiscing neque velit vitae turpis. Maecenas iaculis dui in urna iaculis mattis. Suspendisse ut erat turpis. Nullam pulvinar fringilla semper. Nulla facilisi. Nunc eu tortor eu ipsum adipiscing facilisis. Proin lacinia quam non nulla fermentum a cursus nunc consequat. Suspendisse id diam orci, sed pretium nibh. Sed eros tortor</div>
            </div>
        </div>
    </div>
</div>

这些伪选择器不起作用。如何调整css使其工作？

.editIssueForm .commentContainer .comment div:first-child span:first-child {
  float: left;
  padding-left: -5px;
}
.editIssueForm .commentContainer .comment div:first-child span:last-child {
  float: right;
}

结束

.editIssueForm .commentContainer .comment div:first-child:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.editIssueForm .commentContainer .comment:nth-child(n+2) {
  border-top: 1px solid #ddd;
  padding-top: 5px;
  margin-top: 5px;
}

---

删除直接父对象上的

内联块

，它将元素收缩为其内容，使浮点设置无效

---

示例：

删除直接父级上的

内联块

，它将元素收缩为其内容，使浮点设置无效

---

示例：

您的选择器实际上工作正常

您需要为包含的

指定100%的宽度，以便第二个

可以浮动到主容器的右边缘，而不是受其父容器宽度的约束（由于未指定宽度时内联块元素的性质）

---

---

请注意，边距不会像@Niels answer中那样折叠，因为浮动元素上的边距永远不会折叠，即使其在流块级别的子体中也不会折叠。您的选择器实际上工作正常

您需要为包含的

指定100%的宽度，以便第二个

可以浮动到主容器的右边缘，而不是受其父容器宽度的约束（由于未指定宽度时内联块元素的性质）

---

---

请注意，边距不会像@Niels answer中那样折叠，因为在浮动元素上边距永远不会折叠，即使其在流块级子体中也不会折叠，因为span的浮动正确，问题只是span的包装器

div

。尝试添加：

.editIssueForm .commentContainer .comment div:first-child {
    width: 100%;
}

---

您的span已正确浮动，问题只是span的包装器

div

。尝试添加：

.editIssueForm .commentContainer .comment div:first-child {
    width: 100%;
}