代码之家 › 专栏 › 技术社区 › usernameabc

如何在5个元素之后包装列表?

html-lists flexbox css html

usernameabc · 技术社区 · 7 年前

我们有一个无序的列表,将显示多达10项。我们如何设置列表,使其将前五项放在左边,并将后五项放在下一列中(等分)?

这是电流和期望的输出。我们试着用 CSS Flexbox ,却找不到办法。如果flexbox做不到,可以接受其他想法。

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 回复 | 直到 7 年前

Mr. Hugo 7 年前

我会使用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>

pretty bad browser support ,而列(和flexbox) score better .

Tsundoku 5 年前

将内容排列成可预测的列,每列有五个项目,这似乎是一项工作 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