Есть ли способ отображения списков HTML сверху вниз и слева направо без CSS Flex? - PullRequest
Новая
       23

Есть ли способ отображения списков HTML сверху вниз и слева направо без CSS Flex?

0 голосов
/ 15 января 2020

Просмотр: http://superdistros.com/test.html Сводка: Мои HTML неупорядоченные списки с элементами списка, установленным для перемещения влево, запускаются слева направо. Я использовал CSS Flex на UL, чтобы отображать пункты меню сверху вниз, так что там написано: Совет директоров, Капитальные программы, Гражданские права, сверху вниз и слева направо.

Это работает хорошо, за исключением IE, где свойство Flex не полностью совместимо.

Есть ли другое или лучшее решение CSS или JS, которое может выполнить sh тот же эффект в IE 10 +

Я видел похожие вопросы StackOverflow, но они не совпадают с моим точным вариантом использования. Моя HTML разметка должна оставаться прежней, без добавления div, et c.

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;
}

1 Ответ

0 голосов
/ 16 января 2020

Это ошибка flex в IE 11.

In IE 10-11, min-height объявления на flex-контейнерах работают для определения размера контейнеров сами по себе, но их гибкие дети, кажется, не знают размер своих родителей. Они действуют так, как если бы высота не была установлена ​​вообще.

В вашем случае такая же ситуация с max-height. Мы можем решить эту проблему, добавив элемент оболочки вокруг гибкого контейнера, который сам по себе является гибким контейнером. Поэтому мы делаем <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>

Обновление: Эта часть и эта часть - это новые коды, которые отличается от вашего кода. Пожалуйста, добавьте их в свой код.

...