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

问题描述

我想做这样的事情：

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

类似于这个问题：

我的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 ，它会在右侧留下一个空白空间。我想删除这个空的空间。

解决方案

您想申请 margin-left：-1px; 到.cont类。

CSS：

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

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.

解决方案

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

CSS:

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

这篇关于如何将所有div向左移动1px？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！