У меня была аналогичная проблема. В моем случае проблема возникла из-за неправильного владельца / разрешения. Мне просто пришлось сменить владельца в моем каталоге данных на пользователя mysql, и это решило проблему.
Используйте флексбокс для колонок и установите высоту для ul
- см. Демонстрацию ниже:
ul {
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
max-width: 150px;
height: 8em;
}
li {
margin: 5px;
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
Или вы можете использовать CSS-столбцы - см. Демонстрацию ниже:
ul {
list-style: none;
columns: 2; /* added this */
width: 100%;
max-width: 150px;
height: 8em;
}
li {
margin: 5px;
}
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
[1117 ] Вы можете попытаться добавить высоту / максимальную высоту и изменить направление на столбец или использовать правило столбца:
ul {
list-style:none;
display: flex;
flex-direction:column;
flex-wrap:wrap;
width: 100%;
max-width: 150px;
max-height: 130px;
}
или:
ul {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
Я предполагаю, что вы используете flexbox, чтобы контейнер расширялся по ширине, чтобы содержать как можно больше элементов по горизонтали; в этом случае flex-direction:column
не будет работать. Вы можете проверить https://www.w3schools.com/css/css3_multiple_columns.asp
Поддержка скудна, но это единственное, что может делать то, что вы хотите (вот почему необходимо ввести): https://caniuse.com/#search=column