有沒有辦法在沒有 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>

更新：這部分和這部分是新的代碼，和你的代碼不一樣。 請將它們添加到您的代碼中。