การป้องกันเส้นขอบ "สอง" ใน CSS

สมมติว่าฉันมีสอง div ติดกัน (ใช้https://chrome.google.com/webstore/category/homeเป็นข้อมูลอ้างอิง) โดยมีเส้นขอบ

มีวิธี (โดยเฉพาะอย่างยิ่งเคล็ดลับ CSS) เพื่อป้องกันไม่ให้ div ของฉันปรากฏเหมือนมีเส้นขอบสองชั้นหรือไม่? ดูภาพนี้เพื่อทำความเข้าใจว่าฉันหมายถึงอะไร:

คุณจะเห็นว่าจุดที่ทั้งสองมาบรรจบกันดูเหมือนว่ามีเส้นขอบสองชั้น

#divNumberOne { border-right: 0; }

หากเรากำลังพูดถึงองค์ประกอบที่ไม่สามารถรับประกันได้ว่าจะปรากฏในลำดับใด ๆ โดยเฉพาะ (อาจเป็น 3 องค์ประกอบในหนึ่งแถวตามด้วยแถวที่มี 2 องค์ประกอบเป็นต้น) คุณต้องการบางสิ่งที่สามารถวางไว้ในทุกองค์ประกอบในคอลเลกชัน . โซลูชันนี้ควรครอบคลุมถึง:

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

โปรดทราบว่าโครงร่างใช้ไม่ได้ในเบราว์เซอร์รุ่นเก่า (IE7 และรุ่นก่อนหน้า)

อีกวิธีหนึ่งคุณสามารถยึดติดกับเส้นขอบและใช้ระยะขอบลบ:

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

การสาธิต

รวมie9.jsสำหรับการสนับสนุน IE8 (มีประโยชน์มากสำหรับตัวเลือก CSS / องค์ประกอบหลอกทั้งหมด)

วิธีการแก้ปัญหาหนึ่งอาจจะต้องพิจารณาก็คือการใช้ CSS ที่อยู่ติดกันเลือกพี่น้อง

CSS

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

คุณสามารถใช้ตัวเลือกคี่เพื่อบรรลุสิ่งนี้

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

ฉันมาสาย แต่ลองใช้คุณสมบัติเค้าร่างดังนี้:

.item {
  outline: 1px solid black;
}

โครงร่างใน CSS ไม่ใช้พื้นที่ทางกายภาพดังนั้นจะทับซ้อนกันเพื่อป้องกันไม่ให้เกิดเส้นขอบสองชั้น

หาก div ทั้งหมดมีชื่อคลาสเดียวกัน:

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

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

มีการสาธิต JSFiddle ที่นี่

การใช้ Flexbox จำเป็นต้องเพิ่มคอนเทนเนอร์ลูกที่สองเพื่อให้โครงร่างทับซ้อนกันอย่างถูกต้อง ...

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

วทส

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

เพิ่ม CSS ต่อไปนี้ใน div ทางด้านขวา:

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

หรือแค่ลบเส้นขอบเส้นใดเส้นหนึ่งออก

ฉันเพิ่งใช้

border-collapse: collapse;

ในองค์ประกอบหลัก

  <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

กรณีการใช้งานของฉันคือกล่องในแถวเดียวซึ่งฉันรู้ว่าองค์ประกอบสุดท้ายจะเป็นอย่างไร

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

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

ฉันรู้ว่านี่เป็นปฏิกิริยาที่ล่าช้า แต่ฉันแค่อยากลดมูลค่า 2 เซนต์เนื่องจากวิธีการทำของฉันไม่ได้อยู่ที่นี่

คุณเห็นฉันทำมันไม่ชอบเล่นกับอัตรากำไรขั้นต้นอัตรากำไรเชิงลบโดยเฉพาะอย่างยิ่ง เบราว์เซอร์ทุกคนดูเหมือนว่าจะจัดการเหล่านี้แตกต่างกันเพียงว่าบิตตาดและอัตรากำไรที่ได้รับอิทธิพลอย่างง่ายดายโดยจำนวนมากของสถานการณ์

วิธีของฉันในการทำให้แน่ใจว่าฉันมีตารางที่ดีพร้อม divs คือการสร้างโครงสร้าง html ที่ดีก่อนจากนั้นจึงใช้ css

ตัวอย่างวิธีการทำ:

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

ตอนนี้สำหรับ css ฉันแค่ใช้โครงสร้างแถวเพื่อให้แน่ใจว่าเส้นขอบอยู่ในตำแหน่งที่จำเป็นเท่านั้นทำให้ไม่มีระยะขอบ

.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 โต๊ะที่สมบูรณ์แบบ ตอนนี้เห็นได้ชัดว่าสิ่งนี้จะทำให้ DIV ของคุณมีความกว้างแตกต่างกัน 1px (โดยเฉพาะอันแรก) แต่สำหรับฉันแล้วนั่นไม่เคยสร้างปัญหาใด ๆ เลย หากเป็นเช่นนั้นในสถานการณ์ของคุณฉันเดาว่าคุณจะขึ้นอยู่กับระยะขอบมากกว่า

ฉันสามารถบรรลุได้โดยใช้รหัสนี้:

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

คำถามเก่ามาก แต่เป็นผลการค้นหาแรกของ Google ดังนั้นสำหรับทุกคนที่เจอปัญหานี้และไม่ต้องการให้สื่อเพิ่มเส้นขอบทางด้านขวา / ซ้ายขององค์ประกอบบนอุปกรณ์เคลื่อนที่เป็นต้น

วิธีแก้ปัญหาที่ฉันใช้คือ:

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

วิธีนี้ได้ผลเพราะคุณจะเห็นเส้นขอบ 2px รอบ ๆ องค์ประกอบที่ทำจากเส้นขอบและเงา อย่างไรก็ตามเมื่อองค์ประกอบมาบรรจบกันเงาจะทับซ้อนกันซึ่งทำให้มันกว้าง 2px;

สิ่งที่เกี่ยวกับการให้margin:1px;รอบ div ของคุณ

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

การสาธิต

ฉันชอบใช้ div อื่นข้างหลังเป็นพื้นหลังและลบเส้นขอบทั้งหมด คุณต้องคำนวณขนาดของ div พื้นหลังและตำแหน่งของ div เบื้องหน้า