连续第一个元素后不需要的空间答案

【问题标题】：Unwanted space after first element in a row连续第一个元素后不需要的空间
【发布时间】：2018-10-17 20:42:40
【问题描述】：

我正在创建将根据给定类别显示的配置文件列表。该设置使得使用容器元素包装列表项变得不方便，因此我在每个项目上使用display:inline-flex，而不是使用通常的 justify-this 和 align-that 的 flex 容器。

问题是行中的第一个元素的右侧似乎有一个空格，我不确定为什么。

我想均匀地显示所有元素，在这种情况下，以相同间距显示 4 行，如果可能，不将它们嵌套在父容器中。

// simple function to repeat html elements

$(document).ready(function() {
  let a = $('.a')[0];
  const repeats = 11;
  let count = 0;
  while (count < repeats) {
    $('body').append($(a).clone())

    count++;
  }
  //$( 'body' ).append( html );
});

.a {
  background-color: red;
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-flex;
  height: 25px;
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="a"></div>
</body>

</html>

【问题讨论】：

标签： javascript jquery css flexbox

【解决方案1】：

实际上，现在第一个元素（右侧有空格）是您在 html 中声明的元素。从那里删除并改用：

// simple function to repeat html elements

$(document).ready(function() {
  let a = $('<div class="a"></div>');
  const repeats = 12;
  let count = 0;
  while (count < repeats) {
    $('body').append($(a).clone())

    count++;
  }
  //$( 'body' ).append( html );
});

.a {
  background-color: red;
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-flex;
  height: 25px;
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>

</body>

</html>

【讨论】：

天哪，真奇怪！没想到——谢谢 :)
我认为问题在于您将其附加到正文中。如果使用 $('body').prepend($(a).clone()) ，您的情况无需更改 html 即可工作，并且当您将节点添加到 div 元素时，它应该按预期显示

【解决方案2】：

查看开发工具检查器会发现第一项和第二项之间有一些不可见的代码：

当我在检查器中删除这些行时，间隙被删除，所有框都按预期排列。

所以这是您的脚本附加元素的问题。我不确定您要如何处理（例如，脚本是否仅用于此演示？问题仅在此 IDE 中吗？删除第一个元素是一个选项吗？），所以我不会讨论解决方案。

【讨论】：

有趣的是，即使没有（据我所知）第一个元素和第二个元素之间的脚本，我也会得到相同的结果。看到这个小提琴，而不是附加到正文（因此在脚本下方），我附加到一个容器 div：jsfiddle.net/45pmccm4
为了回答您的问题，脚本仅用于此演示。该问题最初是在使用相同脚本创建多个 HTML 元素的 notepad++ 和 Chrome 浏览器设置中遇到的。删除第一个元素不是生产中的选项，但是出于此模型的目的，请确定为什么不这样做。我想我有点吓坏了，因为我认为我在用我的 flexbox 做一些不太正确的事情，而不是遇到一个巧合的问题！鉴于解决方案是“只是复制和粘贴而不是使用脚本”，我松了一口气，但仍然很好奇它为什么会在第一次发生
等待——可能是：因为元素是display: INLINE-flex，所以差距是因为\n 字符干扰？我注意到鼠标移动时有一个可以突出显示的角色，在我发布之前的搜索中，有人遭受了这种现象的困扰（整个为什么 4 * 25% != 100% 的事情）....
不是the inline-flex issue 你引用的。我试着先解决这个问题。
啊，对。奇怪的是，添加 float 修复了盒子的布局，但是我不确定这会对我的生产代码产生什么影响（我最终放弃并使用了父 div ——毕竟！）。无论如何，由于某种原因，浮动感觉不受欢迎，但我不能确定为什么。也许这就是原因！