Css IE 11和Edge中flexbox的列表项对齐问题

我已经创建了一个有序的问题列表，可以选择编辑或删除每个问题。我正在使用Bootstrap4和FlexBox来设计我的网站。这个列表在Firefox和Chrome上看起来很棒，但当我切换到IE11或Edge时，有一些奇怪的顶部填充，除非我停止使用列表中的FlexBox，否则我似乎无法摆脱

这就是我的列表在Firefox和Chrome中的样子

这就是我在IE11和Edge中的列表

下面是一个包含代码的JSFIDLE：

你如何用自己的话来形容盈余？


什么是财政预算？

如何使我的列表在所有浏览器上看起来相同？如果需要，我愿意将其更改为表或其他元素，但我仍然希望显示数字

提前感谢您的帮助

看起来像个虫子

这里有一个可能的解决方案：

不要使用块级flex容器（

display:flex

），而是使用添加全宽（

width:100%

）的内联级容器（

display:inline flex

）

将此添加到您的代码中：

.d-flex {
   display: inline-flex;
   width: 100%;
}

我认为这个bug与下面的帖子有关。但由于这里的问题仅限于IE11和Edge，而且问题涉及到Chrome，所以我没有将这篇文章作为复制品关闭

---

非常感谢！这是一个奇妙的、简单的修复。我没有使用你的CSS，因为

d-flex

是一个bootstrap4类，我认为覆盖它是不明智的。相反，我将

的第一个子div从

更改为

。这是我更新的JSFIDLE：是的，引导类是更明智的选择。为了清晰和演示，我发布了纯CSS。

.d-flex {
   display: inline-flex;
   width: 100%;
}