CSS-水平列表的动态宽度（在列表的列表中）

我正在尝试实现此布局：

我能找到的最近的是：

@导入url（'http://getbootstrap.com/dist/css/bootstrap.css');
.project\u缩略图\u信息{
保证金：10px 0px 0px 0px；
填充：0；
列表样式：无；
}
.project\u缩略图\u信息li{
边际：0 15px 0 0；
填充：0；
列表样式：无；
浮动：左；
清楚:对,；
}
.project\u缩略图\u信息li ul{
保证金：0；
填充：0；
列表样式：无；
浮动：左；
}
.project\u缩略图\u信息li ul li{
浮动：左；
明确：两者皆有；
}
.project\u缩略图\u信息\u头像{
宽度：35px；
高度：35px；
}
.project\u缩略图\u信息\u标签li{
浮动：左！重要；
清楚：对！重要；
填充：0px 8px 0px 0px；
保证金：0；
显示：块；
}
氢{
字体大小：16px；
字体大小：粗体；
保证金：0；
填充：0；
}
h2 a{
颜色：#000；
}

您可以使用

display:flex

实现您想要的功能

我已经删除了所有的浮动，并更改了内联块（hashtags）和flex（主ul容器）的

@导入url（'http://getbootstrap.com/dist/css/bootstrap.css');
.project\u缩略图\u信息{
保证金：10px 0px 0px 0px；
填充：0；
列表样式：无；
显示器：flex；
}
.项目\u缩略图\u信息\u详细信息{
柔性生长：1；
}
.project\u缩略图\u信息li{
边际：0 15px 0 0；
填充：0；
列表样式：无；
}
.project\u缩略图\u信息li ul{
保证金：0；
填充：0；
列表样式：无；
}
.project\u缩略图\u信息\u头像{
宽度：35px；
高度：35px；
}
.project\u缩略图\u信息\u标签li{
填充：0px 8px 0px 0px；
保证金：0；
显示：内联块；
}
氢{
字体大小：16px；
字体大小：粗体；
保证金：0；
填充：0；
}
h2 a{
颜色：#000；
}

请找到解决方案

@导入url（'http://getbootstrap.com/dist/css/bootstrap.css');
.project\u缩略图\u信息{
保证金：10px 0px 0px 0px；
填充：0；
列表样式：无；
}
.项目\u缩略图\u信息\u详细信息
{
显示：内联块；
宽度：70%；
}
.project\u缩略图\u信息li{
边际：0 15px 0 0；
填充：0；
列表样式：无；
浮动：左；
清楚:对,；
}
.project\u缩略图\u信息li ul{
保证金：0；
填充：0；
列表样式：无；
浮动：左；
}
.project\u缩略图\u信息li ul li{
浮动：左；
明确：两者皆有；
}
.project\u缩略图\u信息\u头像{
宽度：35px；
高度：35px；
}
.project\u缩略图\u信息\u标签li{
浮动：左！重要；
清楚：对！重要；
填充：0px 8px 0px 0px；
保证金：0；
显示：块；
}
氢{
字体大小：16px；
字体大小：粗体；
保证金：0；
填充：0；
}
h2 a{
颜色：#000；
}

谢谢，这很有帮助。我不知道flex规则，在逐行添加解决方案后，我得到了一个线索。这里有几个有用的链接来了解flex：和。这是很好的学习，因为引导正在向它移动，而且它允许所有最好的表位和浮动位，而没有所有的坏位