Ngăn các đường viền "kép" trong CSS

Giả sử tôi có hai div bên cạnh nhau (lấy https://chrome.google.com/webstore/category/home làm tham chiếu) với một đường viền.

Có cách nào (tốt nhất là một thủ thuật CSS) để ngăn các div của tôi xuất hiện như có đường viền kép không? Hãy xem hình ảnh này để hiểu rõ hơn ý tôi:

Bạn có thể thấy rằng nơi hai div gặp nhau, có vẻ như chúng có một đường viền kép.

#divNumberOne { border-right: 0; }

Nếu chúng ta đang nói về các phần tử không thể được đảm bảo xuất hiện theo bất kỳ thứ tự cụ thể nào (có thể 3 phần tử trong một hàng, tiếp theo là một hàng có 2 phần tử, v.v.), bạn muốn một thứ gì đó có thể được đặt trên mọi phần tử trong bộ sưu tập . Giải pháp này sẽ bao gồm:

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

Lưu ý rằng phác thảo không hoạt động trong các trình duyệt cũ hơn (IE7 trở về trước).

Ngoài ra, bạn có thể giữ các đường viền và sử dụng các lề âm:

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

Bản giới thiệu

Bao gồm ie9.js để hỗ trợ IE8 (nó rất hữu ích cho tất cả các bộ chọn CSS / phần tử giả).

Một giải pháp khác mà người ta có thể xem xét là sử dụng bộ chọn anh chị em Liền kề CSS .

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Bạn có thể sử dụng bộ chọn lẻ để đạt được điều này

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

Nếu tất cả các div có cùng tên lớp:

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

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

Có một bản demo JSFiddle ở đây.

Tôi đến muộn chương trình nhưng hãy thử sử dụng thuộc tính phác thảo, như sau:

.item {
  outline: 1px solid black;
}

Các đường viền trong CSS không chiếm không gian thực và do đó sẽ chồng chéo lên nhau để ngăn đường viền kép.

Thêm CSS sau vào div ở bên phải:

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

Hoặc chỉ cần loại bỏ một trong các đường viền.

Tôi chỉ sử dụng

border-collapse: collapse;

trong phần tử mẹ

Sử dụng Flexbox, cần phải thêm vùng chứa con thứ hai để có được các đường viền chồng chéo lên nhau một cách chính xác ...

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

  <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

Trường hợp sử dụng của tôi là cho các hộp trong một hàng duy nhất mà tôi biết phần tử cuối cùng sẽ là gì.

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

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

Tôi biết đây là một phản ứng muộn, nhưng tôi chỉ muốn giảm giá trị 2 xu của mình, vì cách làm của tôi không có ở đây.

Bạn thấy đấy, tôi thực sự không thích chơi với biên, đặc biệt là biên âm . Mọi trình duyệt dường như xử lý những điều này chỉ khác một chút và lợi nhuận dễ dàng bị ảnh hưởng bởi rất nhiều tình huống.

Cách của tôi để đảm bảo tôi có một bảng đẹp với div, là tạo một cấu trúc html tốt trước tiên , sau đó áp dụng css.

Ví dụ về cách tôi làm điều đó:

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

Bây giờ, đối với css, tôi chỉ cần sử dụng cấu trúc hàng để đảm bảo các đường viền chỉ ở nơi chúng cần, không gây ra lề;

.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 thì đấy, một chiếc bàn hoàn hảo. Bây giờ, rõ ràng điều này sẽ khiến DIV của bạn có sự khác biệt 1px về chiều rộng (cụ thể là chiều rộng đầu tiên), nhưng đối với tôi, điều đó chưa bao giờ tạo ra bất kỳ vấn đề nào dưới bất kỳ hình thức nào. Nếu nó xảy ra trong tình huống của bạn, tôi đoán bạn sẽ phụ thuộc nhiều hơn vào lợi nhuận.

Tôi đã có thể đạt được nó bằng cách sử dụng mã này:

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

Một câu hỏi rất cũ, nhưng đó là kết quả đầu tiên của google, vì vậy đối với bất kỳ ai gặp phải vấn đề này và không muốn có các truy vấn phương tiện để thêm lại đường viền vào bên phải / bên trái của phần tử trên thiết bị di động, v.v.

Giải pháp tôi sử dụng là:

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

Điều này hoạt động vì bạn sẽ thấy một đường viền 2px xung quanh phần tử được tạo bởi đường viền và bóng đổ. Tuy nhiên, nơi các yếu tố gặp nhau, bóng đổ chồng lên nhau khiến nó có chiều rộng 2px;

Điều gì về việc đưa ra một margin:1px;xung quanh div của bạn.

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

BẢN GIỚI THIỆU

Tôi thích sử dụng một div khác phía sau chúng làm nền và xóa tất cả các đường viền. Bạn chỉ cần tính kích thước của div nền và vị trí của divs nền trước.