html - 删除弹性列表中下一列之间的间隙

Question

我创建了一个包含 2 列的列表。但内容之间有隔阂。我怎样才能删除这个？我创建了一个小提琴来说明我的问题：https ://jsfiddle.net/tk83w1L4/

我已经尝试过并且flex-wrap: wrap;没有任何工作flex-direction: column;align-content: flex-start;

.wrapper {
    columns: 2;
    flex-wrap: wrap;
    border: 1px solid #000;
    li {
        display: flex;
        background-color: #f0f0f0;

        &:hover {
            background-color: red;
        }
    }
}

标签： htmlcssflexbox

Answer 1

使用块级元素时使用inline-flex而不是flex存在已知问题，但使用内联等效项可解决问题

.wrapper {
  /*flex-wrap: wrap; not needed*/
  border: 1px solid #000;
  columns: 2;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: inline-flex;
  min-width: 100%; /* to make it behave as flex */
  background-color: #f0f0f0;
  padding: 5px;
}

li:hover {
  background-color: red;
}

<div class="wrapper">
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
    <li>List 113</li>
  </ul>
</div>

顺便说一句，您在这里并不需要 flexbox：

.wrapper {
  border: 1px solid #000;
  columns: 2;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  min-width: 100%; 
  background-color: #f0f0f0;
  padding: 5px;
}

li:hover {
  background-color: red;
}

<div class="wrapper">
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
    <li>List 113</li>
  </ul>
</div>