发表新帖
发表新帖

Preventing “double” borders in CSS

后端 未结
关注
17 1459
梦毁少年i
梦毁少年i 2020-12-02 11:49

Say I have two divs next to each other (take https://chrome.google.com/webstore/category/home as reference) with a border.

Is there a way (preferably a CSS trick) to

相关标签:
17条回答
  • 佛祖请我去吃肉
    2020-12-02 12:33

    What about giving a margin:1px; around your 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>

    DEMO

    0 讨论(0)
  • 一生所求
    2020-12-02 12:34

    You can use odd selector to achieve this

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

    0 讨论(0)
  • 走了就别回头了
    2020-12-02 12:34

    I just use

    border-collapse: collapse;

    in the parent element

    0 讨论(0)
  • 挽巷
    2020-12-02 12:34 
      <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 ​

    0 讨论(0)
  • 情书的邮戳
    2020-12-02 12:34

    I know this is a late reaction, but I just wanted to drop my 2 cents worth, since my way of doing it is not in here.

    You see, I really don't like playing with margins, especially negative margins. Every browser seems to handle these just that tad bit different and margins are easily influenced by a lot of situations.

    My way of making sure I have a nice table with divs, is creating a good html structure first, then apply the css.

    Example of how I do it:

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

    Now, for the css, I simply use the rows structure to make sure the borders are only where they need to be, causing no margins;

    .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, a perfect table. Now, obviously this would cause your DIVs to have 1px differences in widths (specifically the first one), but for me, that has never created any issue of any kind. If it does in your situation, I guess you'd be more dependant on margins then.

    0 讨论(0)
 看不清?
提交回复
热议问题