Question

问题在标题中。

这里是一个小提琴：https://jsfiddle.net/ms89adx4/1/

代码如下：

body {
  font-size: 0;
  margin: 0;
}

.button {
  height: 100px;
  background-color: red;
  width: 85px;
  transform: skew(20deg);
  position: relative;
  display: inline-block;
}

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

我不希望每隔div有空白。我可以做margin-left: -0.5px;，但我认为这对这个问题是不好的解决方案。

Answer 1

您可以添加一个小轮廓：

.container {
  font-size: 0;
  margin: 0;
}

.button {
  height: 100px;
  background-color: red;
  width: 85px;
  display: inline-block;
  position: relative;
  transform: skew(20deg);
  outline:0.1px solid red;
}

<div class="container">
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

Answer 2

这里的问题似乎是平行四边形的宽度，有时某个宽度可以显示div之间的空间。

尝试更改：

width: 85px;

收件人

width: 86px;

通常，奇数将在div之间显示一个空格，尝试在选择元素的宽度时始终使用偶数。

Answer 3

此问题可能有多种解决方案。如您所愿，您可以添加margin-left。

默认情况下，div的border设置为none

因此，您可以添加一个小边框，如下所示：

border: .1px solid red;

这应该可以解决问题。干杯！

Answer 4

尝试将其添加到.button

margin-right: -1px;

编辑：尝试

-webkit-backface-visibility: hidden;

为什么每隔一个平行四边形div有空间？

4 个答案: