Question

我正在创建一个基于给定类别显示的配置文件列表。设置使得使用容器元素来包装列表项是不方便的，所以我在每个项目上使用display:inline-flex而不是使用通常的对齐的flex容器 - this和align-that。

问题是该行中的第一个元素似乎在其右侧有一个空格，我不确定原因。

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

＆＃13;
＆＃13;
// 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 ); });
＆＃13;
.a { background-color: red; box-sizing: border-box; border: 1px solid green; display: inline-flex; height: 25px; width: 25%; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div class="a"></div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

Answer 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>

Answer 2

查看开发工具检查器会在第一个和第二个项目之间显示一些不可见的代码：

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

因此，您的脚本附加元素会出现问题。我不确定你想怎么处理它（例如，只有这个演示的脚本？这个问题只出在这个IDE中吗？是删除第一个元素吗？），所以我不会进入解决方案。 / p>

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

2 个答案: