सीएसएस में "डबल" सीमाओं को रोकना

Question 1

मान लें कि मेरे पास एक-दूसरे के बगल में दो divs हैं ( एक सीमा के साथ https://chrome.google.com/webstore/category/home )।

वहाँ एक रास्ता (अधिमानतः एक सीएसएस चाल) मेरी divs एक दोहरी सीमा की तरह दिखाई देने से रोकने के लिए है? इस छवि को बेहतर तरीके से समझने के लिए एक नज़र डालें:

"डबल" सीमा

आप देख सकते हैं कि जहां दो विभाग मिलते हैं, ऐसा प्रतीत होता है कि उनकी दोहरी सीमा है।

Question 2

#divNumberOne { border-right: 0; }

Question 3

यदि हम ऐसे तत्वों के बारे में बात कर रहे हैं जो किसी विशेष क्रम में प्रकट होने की गारंटी नहीं दे सकते हैं (शायद एक पंक्ति में 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;
}

Question 4

HTML:

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

सीएसएस:

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

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

डेमो

IE8 समर्थन के लिए ie9.js शामिल करें (यह सभी सीएसएस चयनकर्ताओं / छद्म तत्वों के लिए बहुत उपयोगी है)।

Question 5

एक अन्य समाधान जिस पर विचार किया जा सकता है वह है सीएसएस एडजेंट सिबलिंग सेलेक्टर का उपयोग करना ।

सीएसएस

div {
    border: 1px solid black;
}

div + div {
    border-left: 0;
}

jsFiddle

Question 6

इसे प्राप्त करने के लिए आप विषम चयनकर्ता का उपयोग कर सकते हैं

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

स्निपेट का विस्तार करें

Question 7

मुझे शो के लिए देर हो रही है, लेकिन आउटलाइन प्रॉपर्टी का उपयोग करने की कोशिश करें, जैसे:

.item {
  outline: 1px solid black;
}

CSS में रूपरेखा भौतिक स्थान पर कब्जा नहीं करती है और इसलिए दोहरी सीमा को रोकने के लिए ओवरलैप करेगी।

Question 8

यदि divs सभी का एक ही वर्ग नाम है:

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

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

यहाँ एक JSFiddle डेमो है।

Question 9

फ्लेक्सबॉक्स का उपयोग करके एक दूसरे बच्चे के कंटेनर को ठीक से जोड़ना आवश्यक था ताकि एक दूसरे को ओवरलैप किया जा सके ...

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

Question 10

निम्नलिखित सीएसएस को दाईं ओर दिए गए div में जोड़ें:

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

या बस सीमाओं में से एक को हटा दें।

Question 11

मैं सिर्फ उपयोग करता हूं

border-collapse: collapse;

मूल तत्व में

Question 12

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

सीएसएस:

  .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

Question 13

मेरा उपयोग मामला एक एकल पंक्ति में बक्से के लिए था जहां मुझे पता था कि अंतिम तत्व क्या होगा।

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

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

Question 14

मुझे पता है कि यह देर से प्रतिक्रिया है, लेकिन मैं सिर्फ अपने 2 सेंट को गिराना चाहता था, क्योंकि मेरे ऐसा करने का तरीका यहां नहीं है।

आप देखें, मुझे वास्तव में मार्जिन के साथ खेलना पसंद नहीं है, खासकर नकारात्मक मार्जिन । हर ब्राउज़र इन को संभालने के लिए लगता है कि थोड़ा अलग है और हाशिये आसानी से बहुत सारी स्थितियों से प्रभावित होते हैं ।

यह सुनिश्चित करने का मेरा तरीका है कि मेरे पास divs के साथ एक अच्छी तालिका है, पहले एक अच्छा html संरचना बना रहा है , फिर सीएसएस लागू करें।

मैं इसे कैसे करता हूं इसका उदाहरण:

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

अब, सीएसएस के लिए, मैं केवल यह सुनिश्चित करने के लिए पंक्तियों की संरचना का उपयोग करता हूं कि बॉर्डर्स केवल वे हैं जहां उन्हें होने की आवश्यकता है, जिससे कोई मार्जिन न हो;

.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 वसीला, एक आदर्श तालिका। अब, जाहिर है कि इससे आपके DIV को चौड़ाई (विशेष रूप से पहला वाला) में 1px अंतर होगा, लेकिन मेरे लिए, जिसने कभी भी किसी भी तरह का कोई मुद्दा नहीं बनाया है। यदि यह आपकी स्थिति में होता है, तो मुझे लगता है कि आप तब मार्जिन पर अधिक निर्भर होंगे।

Question 15

मैं इस कोड का उपयोग करके इसे प्राप्त करने में सक्षम था:

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

Question 16

एक बहुत पुराना सवाल है, लेकिन यह पहला Google परिणाम था, इसलिए किसी के लिए भी जो इस पर आता है और मोबाइल आदि पर तत्व के दाईं / बाईं ओर सीमा को फिर से जोड़ने के लिए मीडिया क्वेरी नहीं करना चाहता है।

मेरे द्वारा उपयोग किया जाने वाला समाधान है:

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

यह काम करता है क्योंकि आपको सीमा और छाया से बने तत्व के चारों ओर 2px की सीमा दिखाई देगी। हालांकि, जहां तत्व मिलते हैं, छाया ओवरलैप हो जाती है जो इसे 2px चौड़ा रखती है;

Question 17

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>

डेमो

Question 18

मैं पृष्ठभूमि के रूप में उनके पीछे एक और div का उपयोग करना पसंद करता हूं और सभी सीमाओं को हटा देता हूं। आपको बस पृष्ठभूमि div के आकार और अग्रभूमि div की स्थिति की गणना करने की आवश्यकता है।