Объединение "столбцов" и "display: table" отображает один столбец в Firefox

Я пытаюсь решить проблему в Firefox (я использую 40.0.3), где использование -moz-column-count и display: table приводит к отображению списка в виде одного столбца. Здесь мой пример и jsfiddle:

div {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  display: table;
  margin: 0 auto;
}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

Ответ 1

На самом деле, я думаю, что Chrome и IE являются неправильными. Они do дают то, что вы хотите, но они не должны, например FF.

В вашем коде вы говорите ' split-div-in-2-columns, но по существу вы вставляете только одну ul. Когда вы разделите ul на две части (см. Фрагмент), то FF работает так, как ожидалось, так же как CH и IE BTW.

Если бы я создал ваш код, на самом деле ожидал бы только один столбец, а именно ul of li (или один div p, один p span и т.д.). Второй ul будет вторым столбцом (второй div... и т.д.). Отсюда мой вывод о том, что Chrome и IE запутались.

Я ненавижу непредвиденное поведение, подобное этому, заставляет вас не знать, какой браузер правильный.

Вот скорректированный код:

div {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2; /* demo code */
}
ul {
  display: table;
  margin: 0 auto;
}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
  </ul>
  <ul>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

Ответ 2

Как правильно центрировать список, чтобы он работал во всех браузерах?

Вы можете использовать гибкую рамку CSS3 для выравнивания списка по центру. Поскольку вы используете многоколоночный макет CSS3, я предполагаю, что вы создаете список для современных браузеров. Таким образом, способ гибкий блок - это путь.

Пусть <div> - контейнер гибких элементов. justify-content:center выровнят список по центру.
Установите количество столбцов на <ul>. Вы можете установить *-column-gap для интервала между столбцы.

Работает в Firefox, Chrome, Internet Explorer, Edge и Opera (т.е. в основном все браузеры). Вот демонстрация JSfiddle

* {
  margin: 0;
  padding: 0;
}
div {
  display: flex;
  justify-content: center;
}
ul {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  -moz-column-gap: 100px;
  -webkit-column-gap: 100px;
  column-gap: 100px;
}
h2 {
  text-align: center;
  margin-bottom: 10px;
}

<h2> Centered CSS3 multi-column layout </h2>
<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

Ответ 3

Вы должны использовать display:block для ul, потому что счетчик столбцов не работает должным образом с display:table в Firefox.

Вы можете использовать width: fit-content; для центровки столбцов в div.

div {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}
ul {
  display: block;
  margin: 0 auto;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;

}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

Ответ 4

Можно проверить Firefox, используя правило @supports.
Поскольку другие браузеры не поддерживают -moz-column-count, они не затрагиваются.
И FF может получить индивидуальное решение внутри этого блока.

https://jsfiddle.net/094gmjp2/5/

div {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

ul {
    display: table;
    margin: 0 auto;
}

@supports (-moz-column-count: 2) {
    ul {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
    }
}

<div>
    <ul>
        <li>asadf</li>
        <li>b</li>
        <li>cadsfa</li>
        <li>d</li>
    </ul>
</div>