Mencegah batas "ganda" di CSS

Katakanlah saya memiliki dua div di samping satu sama lain (gunakan https://chrome.google.com/webstore/category/home sebagai referensi) dengan pembatas.

Apakah ada cara (sebaiknya trik CSS) untuk mencegah div saya muncul seperti memiliki bingkai ganda? Lihat gambar ini untuk lebih memahami apa yang saya maksud:

Anda dapat melihat bahwa di mana dua div bertemu, tampaknya mereka memiliki batas ganda.

#divNumberOne { border-right: 0; }

Jika kita berbicara tentang elemen yang tidak dapat dijamin untuk muncul dalam urutan tertentu (mungkin 3 elemen dalam satu baris, diikuti oleh baris dengan 2 elemen, dll.), Anda menginginkan sesuatu yang dapat ditempatkan pada setiap elemen dalam koleksi . Solusi ini harus mencakup itu:

.collection {
    /* these styles are optional here, you might not need/want them */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid; /* use instead of border */
    margin-top: 1px;
    margin-left: 1px;
}

Perhatikan bahwa garis besar tidak berfungsi di browser lama (IE7 dan sebelumnya).

Bergantian, Anda dapat tetap menggunakan perbatasan dan menggunakan margin negatif:

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

HTML:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS:

div {
    border: 1px solid #000;
    float: left;
}

div:nth-child(n+2) {
    margin-left: -1px;
}

Demo

Sertakan ie9.js untuk dukungan IE8 (ini sangat berguna untuk semua pemilih CSS / pseudo-elemen).

Solusi lain yang mungkin dipertimbangkan adalah menggunakan pemilih saudara yang Berdekatan CSS .

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Anda dapat menggunakan pemilih ganjil untuk melakukannya

.child{
   width:50%;
   float:left;
   box-sizing:border-box;
   text-align:center;
   padding:10px;
   border:1px solid black;
   border-bottom:none;
}
.child:nth-child(odd){
   border-right:none;
}
.child:nth-last-child(2),
.child:nth-last-child(2) ~ .child{
   border-bottom:1px solid black
}

<div>
    <div class="child" >1</div>
    <div class="child" >2</div>
    <div class="child" >3</div>
    <div class="child" >4</div>
    <div class="child" >5</div>
    <div class="child" >6</div>
    <div class="child" >7</div>
    <div class="child" >8</div>
</div>

Saya terlambat ke pertunjukan tetapi coba gunakan properti garis besar, seperti:

.item {
  outline: 1px solid black;
}

Garis besar di CSS tidak menempati ruang fisik dan karena itu akan tumpang tindih untuk mencegah batas ganda.

Jika semua div memiliki nama kelas yang sama:

div.things {
    border: 1px solid black;
    border-left: none;
}

div.things:first-child {
    border-right: 1px solid black;
}

Ada demo JSFiddle di sini.

Menggunakan Flexbox, perlu untuk menambahkan wadah anak kedua agar garis besar saling tumpang tindih ...

<div class="grid__container">
    <div class="grid__item">
        <div class="grid__item-outline">
              <!-- content -->
        </div>
    </div>
</div>

SCSS

.grid__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 1px 0 0; // margin-right 1px to give the correct width to the container
}

.grid__item {
    flex: 0 1 25%; // grid of 4
    margin: 0 0 1px; // margin-bottom to prevent double lines
}

.grid__item-outline {
    margin: 0 0 0 1px; // margin-left to prevent double lines
    outline: 1px solid #dedede;
}

Tambahkan CSS berikut ke div di sebelah kanan:

position: relative;
left: -1px; /* your border-width times -1 */

Atau hapus saja salah satu perbatasan.

Saya hanya menggunakan

border-collapse: collapse;

di elemen induk

  <div class="one"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>

CSS:

  .one{
    width:100px;
    height:100px;
    border:thin red solid;
    float:left;
  }
.two{
    width:100px;
    height:100px;
    border-style: solid solid solid none;

    border-color:red;
    border-width:1px;
    float:left;
}

jsFiddle

Kasus penggunaan saya adalah untuk kotak dalam satu baris di mana saya tahu apa elemen terakhirnya.

.boxes {
  border: solid 1px black  // this could be whatever border you need
  border-right: none;
}

.furthest-right-box {
  border-right: solid 1px black !important;
}

Saya tahu ini adalah reaksi yang terlambat, tetapi saya hanya ingin menurunkan nilai 2 sen saya, karena cara saya melakukannya tidak ada di sini.

Soalnya, saya sangat tidak suka bermain-main dengan margin, apalagi margin negatif . Setiap browser tampaknya menangani ini hanya sedikit berbeda dan margin mudah dipengaruhi oleh banyak situasi.

Cara saya untuk memastikan bahwa saya memiliki tabel yang bagus dengan div, adalah membuat struktur html yang baik terlebih dahulu , kemudian menerapkan css.

Contoh bagaimana saya melakukannya:

 <div class="tableWrap">
   <div class="tableRow tableHeaders">
     <div class="tableCell first">header1</div>
     <div class="tableCell">header2</div>
     <div class="tableCell">header3</div>
     <div class="tableCell last">header4</div>
   </div>
   <div class="tableRow">
     <div class="tableCell first">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell">stuff</div>
     <div class="tableCell last">stuff</div>
   </div>
</div>

Sekarang, untuk css, saya hanya menggunakan struktur baris untuk memastikan perbatasan hanya di tempat yang mereka butuhkan, tidak menyebabkan margin;

.tableWrap {
  display: table;
  }

.tableRow {
  display: table-row;
  }

.tableWrap .tableRow:first-child .tableCell {
  border-top: 1px solid #777777;
  }

.tableCell {
  display: table-cell;
  border: 1px solid #777777;
  border-left: 0;
  border-top: 0;
  padding: 5px;
  }

.tableRow .tableCell:first-child {
  border-left: 1px solid #777777;
  }

Et voila, meja yang sempurna. Sekarang, jelas ini akan menyebabkan DIV Anda memiliki perbedaan lebar 1px (khususnya yang pertama), tetapi bagi saya, itu tidak pernah menimbulkan masalah apa pun. Jika itu terjadi dalam situasi Anda, saya kira Anda akan lebih bergantung pada margin.

Saya bisa mencapainya menggunakan kode ini:

td.highlight {
    outline: 1px solid yellow !important;
    box-shadow: inset 0px 0px 0px 3px yellow;
    border-bottom: 1px solid transparent !important;
}

Pertanyaan yang sangat lama, tetapi ini adalah hasil Google pertama, jadi bagi siapa pun yang menemukan ini dan tidak ingin memiliki kueri media untuk menambahkan kembali batas ke kanan / kiri elemen di seluler, dll.

Solusi yang saya gunakan adalah:

.element {
    border: 1px solid black;
    box-shadow: 0 0 0 1px black;
}

Ini berfungsi karena Anda akan melihat perbatasan 2px di sekitar elemen yang terbuat dari perbatasan dan bayangan. Namun, saat elemen bertemu, bayangan tumpang tindih yang membuatnya tetap lebar 2px;

Bagaimana dengan memberikan margin:1px;sekitar div Anda.

<html>
<style>
.brd{width:100px;height:100px;background:#c0c0c0;border:1px solid red;float:left;margin:1px;}
</style>
<body>
    <div class="brd"></div>
    <div class="brd"></div>
    <div class="brd"></div>
</body>
</html>

DEMO

Saya lebih suka menggunakan div lain di belakang mereka sebagai latar belakang dan menghapus semua perbatasan. Anda hanya perlu menghitung ukuran div latar belakang dan posisi div latar depan.