gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:19:36 26 4
gpt4 key购买 nike

我创建了一个有序的问题列表,可以选择编辑或删除每个问题。我正在使用 Bootstrap 4 和 flexboxes 来设计我的网站。该列表在 Firefox 和 Chrome 上看起来不错,但是当我切换到 IE11 或 Edge 时,有一些奇怪的顶部填充我似乎无法摆脱,除非我停止在列表中使用 flexboxes。

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

Image of an ordered list

这是我的列表在 IE11 和 Edge 中的样子

Image of the same ordered list

这是一个带有代码的 JSFiddle:https://jsfiddle.net/0g7mpovu

<ol class="mb-0">
<li class="px-3 py-1">
<div class="d-flex">
<div class="d-flex flex-column align-self-center flex-grow-1 w-100">
How would you describe a surplus in your own words?
</div>

<div>
<div class="dropdown">
<button type="button" class="btn btn-link" title="Actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h text-muted"></i>
</button>

<div class="dropdown-menu">
<a href="#" class="dropdown-item">Edit</a>
<a href="#" class="dropdown-item">Delete</a>
</div>
</div>
</div>
</div>
</li>

<li class="px-3 py-1">
<div class="d-flex">
<div class="d-flex flex-column align-self-center flex-grow-1 w-100">
What is a fiscal budget?
</div>

<div>
<div class="dropdown">
<button type="button" class="btn btn-link" title="Actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h text-muted"></i>
</button>

<div class="dropdown-menu">
<a href="#" class="dropdown-item">Edit</a>
<a href="#" class="dropdown-item">Delete</a>
</div>
</div>
</div>
</div>
</li>
</ol>

如何使我的列表在所有浏览器上看起来都一样?如果需要,我愿意将其更改为表格或其他元素,但我仍想显示数字。

在此先感谢您的帮助!

最佳答案

看起来像一个错误。

这是一个可能的解决方法:

不使用 block 级 flex 容器(display: flex),而是使用内联级容器(display: inline-flex)并添加全宽( 宽度:100%)。

将此添加到您的代码中:

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

revised fiddle

我认为这个错误与下面的帖子有关。但由于这里的问题仅限于 IE11 和 Edge,而那里的问题涉及到 Chrome,所以我没有关闭此帖子。

关于css - IE 11 和 Edge 中 flexbox 的列表项对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57063560/

26 4 0
文章推荐: css - Susy 响应式网格
文章推荐: javascript - 当表单与ajax提交事件一起使用时,为什么通常使用
而不是
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com