删除弹性列表中下一列之间的间隙答案

【问题标题】：Remove gap between next column in a flex list删除弹性列表中下一列之间的间隙
【发布时间】：2020-02-11 06:22:28
【问题描述】：

我创建了一个包含 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;
        }
    }
}

【问题讨论】：

padding:0 margin:0 for the ul
@TemaniAfif 谢谢，但我想在列表中添加一些填充..
那么你说的差距是什么？
@TemaniAfif 将鼠标悬停在此小提琴的列表 7 上，您会看到红色背景转到下一列：jsfiddle.net/2ec4o5q7

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

你可以改变你的CSS来解决这个问题

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

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

【讨论】：