html - 一連の境界線を折りたたむ方法CSSを使用したタグ？

Question

固定幅と1ピクセルの境界線を持つDIVで作成されたグリッドがあります。これで、2つのDIVが互いに接触すると、境界線は明らかに2pxになります。

グリッド全体で1pxの境界線を取得するにはどうすればよいですか？

これは私が意味することです：

http://jsfiddle.net/Before/4uPtj/

HTML：

<div class="gridcontainer">
  <div class="griditem"></div>
  <!-- 15 more times -->
</div>

CSS：

div.gridcontainer
{
  width: 80px;
  line-height: 0;
}

div.griditem
{
  display: inline-block;            
  border: 1px solid black;
  width: 18px;
  height: 18px;
}

Answer 1

これを試して：

div.griditem
{
    display: inline-block;            
    border: 1px solid black;
    width: 18px;
    height: 18px;
    margin-left: -1px;
    margin-bottom: -1px;
}

Answer 2

こんにちは、griditem div に従って、gridcontainer を定義します

このように

CSS

   div.gridcontainer
    {
        width: 76px;
        line-height: 0;
        border: solid black;
        border-width: 0 1px 1px 0;
    }

    div.griditem
    {
        display:inline-block;           
        border: solid black;
        border-width: 1px 0 0 1px;
        width: 18px;
        height: 18px;
    }

HTML

<div class="gridcontainer">
    <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

ライブデモはこちらhttp://jsfiddle.net/rohitazad/4uPtj/1/

Answer 3

負のマージンなしでそれを行う別の方法を次に示します: http://jsfiddle.net/e5crg405/

div.gridcontainer {
    width: 80px;
    line-height: 0;
}

div.griditem {
    display: inline-block;            
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    width: 18px;
    height: 18px;
}

div.griditem:nth-child(4n + 1) {
    border-left: 1px solid black;
}

div.griditem:nth-child(-n + 4) {
    border-top: 1px solid black;
}

Answer 4

<style>

.gridcontainer .griditem
    {
        border : 2px solid rgba(204,204,204,0.8) !important;
        margin-left:-1px; 
        margin-right:-1px;
        margin-top: -1px;
        margin-bottom: -1px;
    }
</style>