список в несколько рядов и несколько строк

190

13 декабря 2017, 21:23

Приветствую

У меня есть список <ul></ul>, содержащий значительное число <li></li> элементов.

Хочу добиться того, чтоб они были выведены в несколько строк и несколько столбцов, при этом все сделать в рамках одного <ul> и одного <div>, без привлечения таблиц и других сущностей.

Если бы я хотел выводить в столбец, то для

определил бы

li {
    display: block;
}

Если бы хотел выводить в строку, то для

определил бы

li {
    display: inline-block;
}

а вот как сделать и сроку и столбец, например, чтобы строк было не больше 3 (столбцов сколько угодно) или столбцов было не больше 5 (строк сколько угодно)

вроде сталкивался с решением для css3, но благополучно забыл :(

Answer 1

для столбцов решение нашел:

column-count: 5;
-webkit-column-count: 5;
-moz-column-count: 5;

А вот кол-во рядов можно вычислит на основании свойств

column-gap
column-width

Но в явном виде задать вроде как не получится :(

Возникла новая проблема (см. рисунок)

css код:

.submenu {
    position:                   absolute;
    top:                        calc(50px + 21px);
    left:                       0px;
    margin:                     0px;
    padding:                    0px;
    width:                      100vw;
    background: #fff0f0;
}
.submenu ul {
    list-style:                 none;
    margin:                     0px;
    padding:                    0px;    
    column-count:               3;
    -moz-column-count:          3;
    -webkit-column-count:       3;
    column-gap:                 20px;
}
.submenu > ul li {
    cursor:                     pointer;    
    display:                    block;
    position:                   relative;
    width:                      300px;
    height:                     100%;

    margin:                     0px;
    padding:                    0px 10px;
    font-family:                OpenSansLight;
    font-size:                  14px;
    font-weight:                400;
    text-transform:             uppercase;
    text-align:                 left;
    line-height:                25px;
    color:                      #000000;
    margin: 2px 0px;
    border: 1px solid black;    
}

пропала нижняя граница у TEXT #7
нижняя граница перенеслась в ряд где TEXT #8
почему-то по центру больше элементов, хотя хотелось бы слева больше, справа меньше
если посмотреть 3 ряда, то 2ой ряд выше на 1px, чем 1ый и 3ий

Answer 2

Можно использовать flex , например, так:

ul.s3 { 
  display: flex; 
  flex-wrap: wrap; 
} 
ul.s3 li { 
  flex-basis: 30%; 
  display: block; 
  border: 1px solid green; 
} 
 
ul.s5 { 
  display: flex; 
  flex-wrap: wrap; 
} 
ul.s5 li { 
  flex-basis: 17%; 
  display: block; 
  border: 1px solid green; 
} 
li {margin: 2px;}

<ul class="s3"> 
  <li>меню1</li>  <li>меню2</li>  <li>меню3</li> 
  <li>меню4</li>  <li>меню5</li>  <li>меню6</li> 
  <li>меню7</li>  <li>меню8</li>  <li>меню8</li> 
  <li>меню10</li>  <li>меню11</li>  <li>меню12</li> 
  <li>меню13</li>  <li>меню14</li>  <li>меню15</li> 
  <li>меню16</li>  <li>меню17</li>  <li>меню18</li> 
</ul> 
<br /> 
<ul class="s5"> 
  <li>меню1</li>  <li>меню2</li>  <li>меню3</li> 
  <li>меню4</li>  <li>меню5</li>  <li>меню6</li> 
  <li>меню7</li>  <li>меню8</li>  <li>меню8</li> 
  <li>меню10</li>  <li>меню11</li>  <li>меню12</li> 
  <li>меню13</li>  <li>меню14</li>  <li>меню15</li> 
  <li>меню16</li>  <li>меню17</li>  <li>меню18</li> 
</ul>

Answer 3

Не уверен, что правильно понял вопрос. Возможно вам стоит присмотреться к CSS Grid. С ее помощью можно легко управлять, как количеством столбцов, так и строк.

ul { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 1rem; 
}

<ul> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
  <li>Item 4</li> 
  <li>Item 5</li> 
  <li>Item 6</li> 
  <li>Item 7</li> 
  <li>Item 8</li> 
  <li>Item 9</li> 
  <li>Item 10</li> 
  <li>Item 11</li> 
  <li>Item 12</li> 
  <li>Item 13</li> 
  <li>Item 14</li> 
  <li>Item 15</li> 
  <li>Item 16</li> 
  <li>Item 17</li> 
  <li>Item 18</li> 
  <li>Item 19</li> 
  <li>Item 20</li> 
</ul>