Как обернуть списки после 5 элементов? - PullRequest
Новая
       40

Как обернуть списки после 5 элементов?

0 голосов
/ 20 сентября 2018

У нас есть неупорядоченный список, в котором будет отображаться до 10 элементов.Как мы можем настроить список таким образом, чтобы он поместил первые пять элементов слева и поместил следующие пять элементов в следующий столбец (разделив их поровну)?

Вот текущий и желаемый выходные данные.Мы пытались использовать CSS Flexbox , но не можем найти способ сделать это.Откройте для других идей, если flexbox не может это сделать.

Вот текущие результаты и желаемые результаты.output

ul {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
}
<div>
<ul>
  <li>Assertively mesh</li>
  <li>client-centered</li>
  <li>niches and covalent networks</li>
  <li>Uniquely e-enable</li>
  <li>team driven benefits</li>
  <li>rather than exceptional</li>
  <li>architectures Continually</li>
  <li>foster cutting-edge</li>
  <li>open-source core</li>
  <li>process-centric</li>
</ul>

</div>

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Упорядочить содержимое в предсказуемые столбцы, каждый из пяти элементов, может показаться заданием для display: grid: 

ul {
  /* set the layout to grid: */
  display: grid;
  /* define the number of rows you
     require: */
  grid-template-rows: repeat(5, 1fr);
  /* set the flow of the grid to follow
     a columnar layout: */
  grid-auto-flow: column;
}
<div>
  <ul>
    <li>Assertively mesh</li>
    <li>client-centered</li>
    <li>niches and covalent networks</li>
    <li>Uniquely e-enable</li>
    <li>team driven benefits</li>
    <li>rather than exceptional</li>
    <li>architectures Continually</li>
    <li>foster cutting-edge</li>
    <li>open-source core</li>
    <li>process-centric</li>
  </ul>

</div>

JS Fiddle demo .

Хотя, если вы действительно хотите использовать flex-box, вы может : 

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  /* Use the flexbox layout: */
  display: flex;
  /* set the content direction to
     columns: */
  flex-direction: column;
  /* let the contents wrap to
     new columns once the
     boundaries of the element are
     reached: */
  flex-wrap: wrap;
  /* set the height of the containing
     element, in order for the wrapping
     to occur: */
  height: 10em;
  /* entirely irrelevant: */
  list-style: none;
  max-width:500px;
}

li {
  /* set the height of the individual
     'rows' to be 20% of the total height
     of the parent, to enforce the five-
     items per 'column': */
  height: 2em;
  line-height: 2em;
  width: 45%;
}

/* Irrelevant, but allows 'column-headings'
   to be styled: */
li:nth-child(5n + 1) {
  font-weight: bold;
  border-bottom: 1px solid #000;
}
<div>
  <ul>
    <li>Assertively mesh</li>
    <li>client-centered</li>
    <li>niches and covalent networks</li>
    <li>Uniquely e-enable</li>
    <li>team driven benefits</li>
    <li>rather than exceptional</li>
    <li>architectures Continually</li>
    <li>foster cutting-edge</li>
    <li>open-source core</li>
    <li>process-centric</li>
  </ul>
</div>

JS Fiddle demo .

0 голосов
/ 20 сентября 2018

Я бы использовал для этого столбцы CSS: 

ul {columns: 2;}
li {list-style-position: inside;}
<ul>
  <li>Assertively mesh</li>
  <li>client-centered</li>
  <li>niches and covalent networks</li>
  <li>Uniquely e-enable</li>
  <li>team driven benefits</li>
  <li>rather than exceptional</li>
  <li>architectures Continually</li>
  <li>foster cutting-edge</li>
  <li>open-source core</li>
  <li>process-centric</li>
</ul>

Обратите внимание, что 'display: grid' имеет довольно плохую поддержку браузера , в то время как столбцы (и flexbox) оценка лучше .

...