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

Question

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

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

是否有其他或更好的 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 中，flex 容器上的min-height声明用于调整容器本身的大小，但它们的 flex item 子项似乎不知道其父项的大小。 它们就好像根本没有设置高度一样。

在您的情况下，情况与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>

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