有没有办法在没有 CSS Flex 的情况下从上到下与从左到右显示 HTML 列表?

Question

查看： http://superdistros.com/test.html 摘要：我的 HTML 无序列表将列表项设置为左浮动，从左到右运行。我在 UL 上使用 CSS Flex 从上到下显示菜单项，因此它自上而下与左右阅读董事会、资本计划、民权。

这很有效，但在 IE 中，Flex 属性不完全兼容。

是否有其他或更好的CSS或JS解决方案可以在IE 10 +中实现相同的效果

我见过类似的StackOverflow问题，但与我的确切用例不匹配。我的 HTML 标记需要保持不变，不添加div 等。

Flex CSS + https://jsfiddle.net/KevinOrin/hzro9usf/4/

.navbar-nav ul {
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
}

Answer 1

这是 IE 11 中的 flex 错误。

在 IE 10-11 中，弹性容器上的min-height声明用于调整容器本身的大小，但它们的弹性项子项似乎不知道其父项的大小。它们表现得好像根本没有设置高度。

在您的情况下，情况与max-height相同。我们可以通过在 flex 容器周围添加一个包装器元素来解决它，该容器本身就是一个 flex 容器。因此，我们使<div>也变得灵活。您可以整页查看下面的示例：

.navbar-nav {
display: flex;
flex-direction: row;
}
.navbar-nav li {
padding: 0 40px 15px 0;
width: 25%;
float: left;
}
.navbar-nav ul {
display: flex;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
flex-direction: column;
flex-wrap: wrap;
}
@media (min-width: 1510px) {
.navbar-nav ul {
max-height: 170px;
width: 100%;
}
}
@media (min-width: 1005px) and (max-width: 1509px) {
.navbar-nav ul {
max-height: 270px;
width: 100%;
}
}
@media (min-width: 864px) and (max-width: 1004px) {
.navbar-nav ul {
max-height: 330px;
width: 100%;
}
}

<div class="nav navbar-nav">
<ul>
<li class="card">
<a href="/department/board-directors/leadership" data-drupal-link-system-path="node/46">Board of Directors</a>
</li>
<li class="card">
<a href="/department/capital-planning/capital-programs" data-drupal-link-system-path="node/47">Capital Programs</a>
</li>
<li class="card">
<a href="/department/civil-rights/office-civil-rights" data-drupal-link-system-path="node/36">Civil Rights &amp; Diversity</a>
</li>
<li class="card">
<a href="/department/communications/communications" data-drupal-link-system-path="node/48">Communications &amp; Customer Experience</a>
</li>
<li class="card">
<a href="/department/compliance-ethics/compliance-ethics-administration" data-drupal-link-system-path="node/18414">Compliance &amp; Ethics</a>
</li>
<li class="card">
<a href="/department/finance" data-drupal-link-system-path="node/44">Finance</a>
</li>
<li class="card">
<a href="/department/human-resources/human-resources" data-drupal-link-system-path="node/32">Human Resources</a>
</li>
<li class="card">
<a href="/department/information-technology/office-information-digital-technology" data-drupal-link-system-path="node/54">Information Technology</a>
</li>
<li class="card">
<a href="/department/organizational-services/organizational-services" data-drupal-link-system-path="node/51">Organizational Services</a>
</li>
<li class="card">
<a href="/department/police/transit-police" data-drupal-link-system-path="node/37">Police</a>
</li>
<li class="card">
<a href="/department/president-ceo/president-ceo" data-drupal-link-system-path="node/18330">President &amp; CEO</a>
</li>
<li class="card">
<a href="/department/procurement/procurement-support-services" data-drupal-link-system-path="node/18371">Procurement</a>
</li>
<li class="card">
<a href="/department/rail-operations/rail-operations" data-drupal-link-system-path="node/18375">Rail Operations</a>
</li>
<li class="card">
<a href="/department/system-safety/office-system-safety" data-drupal-link-system-path="node/50">System Safety</a>
</li>
<li class="card">
<a href="/department/surface-transit/surface-transit" data-drupal-link-system-path="node/45">Surface Transit</a>
</li>
</ul>
</div>

更新：这部分和这部分是新代码，与您的代码不同。请将它们添加到您的代码中。