Css html5<；总结>；元素，其中某些文本右对齐

我正在尝试使用html5的

和

元素 显示可折叠/可展开的大纲样式列表，但 无法确定如何格式化

元素文本 没错

我要文本左对齐，时间戳 和链接块右对齐。我试着用手来做这件事 使用flexbox作为生产线，并在 flexbox。这适用于

部分中的文本

然而，在总结行中，我尝试过的一切都会产生效果 文本格式正确（如详细信息文本） 但是在三角形下面的一条线上，或者与三角形在同一条线上 三角形，但所有的东西都是对的

下面是一个片段，显示格式正确的摘要文本 但是在一条新的线路上

.outline{背景色：#e0e0ff；边距：30px；}
/*上面和下面的样式提供了
嵌套详细信息块的缩进*/
详细信息>*：非（摘要）{左边距：1em；}
摘要{显示：列表项；}
.title{display:flex；}
.bsect{display:flex；}
.ttext、.ts、.actions、.btext{边框：1px纯绿色；}
.ttext、.btext{flex:1；}
.ts、.actions{flex:0；空白：nowrap；}
预{空白：预换行；边距：0；字体大小：12pt}

简称
2018-07-05 12:00
一些多行
正文。
2018-07-05 12:00

将摘要设置为灵活的容器，然后将

flex:1

添加到

中。title

使其适合所有空间：

.outline{背景色：#e0e0ff；边距：30px；}
/*上面和下面的样式提供了
嵌套详细信息块的缩进*/
详细信息>*：非（摘要）{左边距：1em；}
.title{display:flex；}
.bsect{display:flex；}
.ttext、.ts、.actions、.btext{边框：1px纯绿色；}
.ttext、.btext{flex:1；}
.ts、.actions{flex:0；空白：nowrap；}
预{空白：预换行；边距：0；字体大小：12pt}
总结{
显示器：flex；
对齐项目：居中；
}
摘要>.title{
弹性：1；
}

简称
2018-07-05 12:00
一些多行
正文。
2018-07-05 12:00

我就是这样做的：

summary {
  display: flex;
  align-items: center; /* added this to center the arrow. optional */
}
summary .title {
  flex-grow: 1;
}

.outline{背景色：#e0e0ff；边距：30px；}
/*上面和下面的样式提供了
嵌套详细信息块的缩进*/
详细信息>*：非（摘要）{左边距：1em；}
摘要{显示：列表项；}
.title{display:inline flex；}
.bsect{display:flex；}
.ttext、.ts、.actions、.btext{边框：1px纯绿色；}
.ttext、.btext{flex:1；}
.ts、.actions{flex:0；空白：nowrap；}
预{空白：预换行；边距：0；字体大小：12pt}
总结{
显示器：flex；
对齐项目：居中；
}
摘要.标题{
柔性生长：1；
}

简称
2018-07-05 12:00
一些多行
正文。
2018-07-05 12:00

在第一个代码片段中，他使用了这个，结果不是他想要的，你是对的，@TemaniAfif.^^。但是，出于原则，我不同意flex:1。它设置了3个属性，但人们不理解它。这对他们没什么帮助（增加了flexbox的混乱）。谢谢，但这和@temani afif solution有相同的问题，它丢失了显示项目是展开还是折叠的三角形。@yama：你是说你看不到？您使用的浏览器是什么？正确，标题文本“A short…”及其边框正好位于灰色背景的左边缘。如图所示，灰色背景不会随着三角形向左延伸。使用Firefox-62.0。当我尝试Chrome-69.0.3497.100时，结果看起来像是你的图像，显示的是三角形。谢谢，但这会丢失显示项目是展开还是折叠的三角形。显示/摘要的一个大问题是Gecko选择了完全不同的闪烁方式来实现它。Gecko重复使用

display:list项来显示标记，因此使用任何其他显示值都会删除标记控件。@yamagoya my bad。。没有在FF上进行测试，将尝试找到另一种方法好的，现在我知道谷歌搜索什么了，我在Firefox的消失箭头上看到了很多信息。因此，元素必须保留display:list项，并且不能更改为display:flex。我仍然不明白为什么上面的代码片段2不起作用。从MDN上的阅读来看，.title div中的“inline flex”意味着包含摘要元素的元素应将其视为inline（这似乎是真的，因为它没有放在新行上），但在.title div中，它应该是一个常规的flexbox容器，在其中应用常规flex布局规则。为什么这部分没有发生？@yamagoya是的，但inline意味着适合内容，因此inline flex的行为类似于inline block和inline grid，它们会收缩以适合内容。一个简单的解决方法是向内嵌的Flex项目添加一个宽度，考虑箭头的宽度：检查我的答案的更新