html - 有没有办法在没有 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

这是 a bug IE 11 中的 flex。

In IE 10-11, min-height declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.

在您的情况下，与 max-height 的情况相同。 .我们可以通过在 flex 容器周围添加一个 wrapper 元素来解决它，它本身就是一个 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>

更新: This part和 this part是新代码，与您的代码不同。请将它们添加到您的代码中。