html - 如何将所有 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完美的包裹住它的内容呢？主 div 在应用 left:-npx 之前具有其内容的宽度。对于 -npx，它会在右侧留下一个空白区域。我想删除这个空白区域。

Answer 1

您应该能够将 margin-left:-1px; 添加到 cont 类。