如何将所有div向左移动1px？

Question

我想做这样的事情：

.cont{position:relative;display:inline-block;}
.cont:nth-child(2) {left:-1px}
.cont:nth-child(3) {left:-2px}
.cont:nth-child(4) {left:-3px}
....
.cont:nth-child(n) {left:-5px}

我想要折叠每个单元格的正确div。

类似于这个问题： collapse border + change the color of the border on hover + border radius?

我的HTML：

.main {display:inline-block;border:1px solid #000}

<div class="main">
  <div class="cont">abc<div>
  <div class="cont">def<div>
  <div class="cont">ijk<div>
  <div class="cont">lmo<div>
</div>

另外，如何让主div完美地包装其内容？在应用left:-npx之前，主div具有其内容的宽度。使用-npx，它会在右侧留下一个空白区域。我想删除这个空白区域。

Answer 1

您应该只能将margin-left:-1px;添加到cont课程。

Answer 2

您想将margin-left: -1px;应用于.cont类。

CSS：

.cont {
margin-left:-1px;
}