How to move all divs by 1px to the left?

问题:

I want to do something like this:

.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}

I want to collapse the right div of each cell.

Something similar to this question : collapse border + change the color of the border on hover + border radius?

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

Also, how to make the main div perfectly wrap its content? The main div has the width of its content before applying the left:-npx. With the -npx, it leaves an empty space on the right. I want to delete this empty space.

回答1:

You should just be able to add margin-left:-1px; to cont class.

回答2:

You want to apply margin-left: -1px; to the .cont class.

CSS:

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