找到你要的答案

Q:Child div with border within parent div with border, gap on right edge

Q:边界在父div边框孩子div,差距在右边

So I have a child div with a border within parent div with a border. The child div has 3 tabs all with a width of 33.3334%. but there is tiny gap at the end of the tabs between the child border and the parent border. See the picture: enter image description here

I need to get rid of this gap, so that the border of the parent is the only one visible. Making the tab widths any bigger pushes the 3rd one onto the next line.

Can anyone please help?

Thanks

    li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
      background-color: #a0a3a2;
      border-top-right-radius: 5px;
    }
    li.ui-state-default.ui-corner-top {
      width: 33.3334%;
      border-right: 2px solid #a0a3a2;
      border-bottom: 2px solid #a0a3a2;
      border-top-right-radius: 5px;
    }
    #ui-id-3.ui-tabs-anchor {
      width: 33.3334%;
      border-top-right-radius: 0px!important;
    }
    .woocommerce-tabs {
      margin-bottom: 20px;
      border: 2px solid #adb0b2;
      border-radius: 5px;
      background-color: #ffffff;
      padding: 5px;
    }
<div class="wpb_tabs wpb_content_element" data-interval="0">
  <div class="wpb_wrapper wpb_tour_tabs_wrapper ui-tabs vc_clearfix ui-widget ui-widget-content ui-corner-all">
    <ul class="wpb_tabs_nav ui-tabs-nav vc_clearfix ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
      <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-6f4746f8-2705-5" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
        <a href="#tab-6f4746f8-2705-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">PRODUCT DETAILS</a>
      </li>
      <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-42783517-3ace-8" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
        <a href="#tab-42783517-3ace-8" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">DELIVERY DETAILS</a>
      </li>
      <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-1429777272805-2-1" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
        <a href="#tab-1429777272805-2-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">REVIEWS</a>
      </li>
    </ul>
  </div>
</div>

So I have a child div with a border within parent div with a border. The child div has 3 tabs all with a width of 33.3334%. but there is tiny gap at the end of the tabs between the child border and the parent border. See the picture: enter image description here

我需要摆脱这个差距,使边境的父母是唯一一个可见。使制表符宽度更大的推动第三个到下一行。

有谁能帮忙吗?

谢谢

    li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
      background-color: #a0a3a2;
      border-top-right-radius: 5px;
    }
    li.ui-state-default.ui-corner-top {
      width: 33.3334%;
      border-right: 2px solid #a0a3a2;
      border-bottom: 2px solid #a0a3a2;
      border-top-right-radius: 5px;
    }
    #ui-id-3.ui-tabs-anchor {
      width: 33.3334%;
      border-top-right-radius: 0px!important;
    }
    .woocommerce-tabs {
      margin-bottom: 20px;
      border: 2px solid #adb0b2;
      border-radius: 5px;
      background-color: #ffffff;
      padding: 5px;
    }
<div class="wpb_tabs wpb_content_element" data-interval="0">
  <div class="wpb_wrapper wpb_tour_tabs_wrapper ui-tabs vc_clearfix ui-widget ui-widget-content ui-corner-all">
    <ul class="wpb_tabs_nav ui-tabs-nav vc_clearfix ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
      <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-6f4746f8-2705-5" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
        <a href="#tab-6f4746f8-2705-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">PRODUCT DETAILS</a>
      </li>
      <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-42783517-3ace-8" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
        <a href="#tab-42783517-3ace-8" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">DELIVERY DETAILS</a>
      </li>
      <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-1429777272805-2-1" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
        <a href="#tab-1429777272805-2-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">REVIEWS</a>
      </li>
    </ul>
  </div>
</div>
answer1: 回答1:

Even if you get rid of the gap, you'll still have a double border so you also need to get rid of one of the borders. You can hide the border on the last li with this:

li.ui-state-default.ui-corner-top:last-child {
  border-right: none;
}

But you may still have a gap in the bottom border.

Without seeing the rest of your styling, it's hard to say for sure, but often these unwanted gaps are caused by whitespace in the HTML. This seems counter-intuitive because usually whitespace doesn't matter, but between images and inline block elements it often introduces unwanted gaps.

Unfortunately (to my knowledge) there isn't an elegant solution to this issue. There are hacky solutions using CSS (e.g. set the font-size to zero for the parent element and set an explicit font size for your li elements), but the easiest is to just remove the whitespace between the </li> and the </ul>. See https://css-tricks.com/fighting-the-space-between-inline-block-elements/ for more suggestions.

Run the snippet below for a demonstration - I've replaced the whitespace (including newline) with a comment, which is fine as long as there's no whitespace around the comment.

/* hide the border on the last li */
li.ui-state-default.ui-corner-top:last-child {
  border-right: none;
}

/* original CSS from the question - no changes here */
li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
      background-color: #a0a3a2;
      border-top-right-radius: 5px;
    }
    li.ui-state-default.ui-corner-top {
      width: 33.3334%;
      border-right: 2px solid #a0a3a2;
      border-bottom: 2px solid #a0a3a2;
      border-top-right-radius: 5px;
    }
    #ui-id-3.ui-tabs-anchor {
      width: 33.3334%;
      border-top-right-radius: 0px!important;
    }
    .woocommerce-tabs {
      margin-bottom: 20px;
      border: 2px solid #adb0b2;
      border-radius: 5px;
      background-color: #ffffff;
      padding: 5px;
    }

/* not part of answer - just here to make the snippet more closely
   match the image in the question */
ul {
  width: 100px;
  border-right: 2px solid red;
  border-top-right-radius: 5px;
}
li {
  box-sizing: border-box;
  display:inline-block;
}
<div class="wpb_tabs wpb_content_element" data-interval="0">
  <div class="wpb_wrapper wpb_tour_tabs_wrapper ui-tabs vc_clearfix ui-widget ui-widget-content ui-corner-all">
    <ul class="wpb_tabs_nav ui-tabs-nav vc_clearfix ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
      <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-6f4746f8-2705-5" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
        <a href="#tab-6f4746f8-2705-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">PR</a>
      </li><li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-42783517-3ace-8" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
        <a href="#tab-42783517-3ace-8" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">DE</a>
      </li><li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-1429777272805-2-1" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
        <a href="#tab-1429777272805-2-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">RE</a>
      </li><!-- you can have a comment here, just no whitespace--></ul>
  </div>
</div>

即使你摆脱了差距,你仍然有一个双重边界,所以你还需要摆脱一个边界。你可以用这句话把最后一句话藏起来:

li.ui-state-default.ui-corner-top:last-child {
  border-right: none;
}

但你可能仍然有一个差距在底部边界。

没有看到你的造型的休息,这很难确定,但往往这些多余的空隙用HTML中的空白造成的。这似乎是反直觉,因为通常空白不重要,但图像间和内联块元素往往介绍了多余的空白。

不幸的是(据我所知)没有一个优雅的解决这个问题。有使用CSS哈克的解决方案(例如,设置字体大小为零的父元素和设置你的锂元素的显式字体大小),但最简单的就是删除空格之间的& lt;/李>;和<;/ UL & gt;。看到更多的建议https://css-tricks.com/fighting-the-space-between-inline-block-elements/。

运行下面的代码片段演示我代替空格(包括换行符)和评论,这很好,只要周围有无空格。

/* hide the border on the last li */
li.ui-state-default.ui-corner-top:last-child {
  border-right: none;
}

/* original CSS from the question - no changes here */
li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
      background-color: #a0a3a2;
      border-top-right-radius: 5px;
    }
    li.ui-state-default.ui-corner-top {
      width: 33.3334%;
      border-right: 2px solid #a0a3a2;
      border-bottom: 2px solid #a0a3a2;
      border-top-right-radius: 5px;
    }
    #ui-id-3.ui-tabs-anchor {
      width: 33.3334%;
      border-top-right-radius: 0px!important;
    }
    .woocommerce-tabs {
      margin-bottom: 20px;
      border: 2px solid #adb0b2;
      border-radius: 5px;
      background-color: #ffffff;
      padding: 5px;
    }

/* not part of answer - just here to make the snippet more closely
   match the image in the question */
ul {
  width: 100px;
  border-right: 2px solid red;
  border-top-right-radius: 5px;
}
li {
  box-sizing: border-box;
  display:inline-block;
}
<div class="wpb_tabs wpb_content_element" data-interval="0">
  <div class="wpb_wrapper wpb_tour_tabs_wrapper ui-tabs vc_clearfix ui-widget ui-widget-content ui-corner-all">
    <ul class="wpb_tabs_nav ui-tabs-nav vc_clearfix ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
      <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-6f4746f8-2705-5" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
        <a href="#tab-6f4746f8-2705-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">PR</a>
      </li><li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-42783517-3ace-8" aria-labelledby="ui-id-2" aria-selected="false" aria-expanded="false">
        <a href="#tab-42783517-3ace-8" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">DE</a>
      </li><li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-1429777272805-2-1" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false">
        <a href="#tab-1429777272805-2-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">RE</a>
      </li><!-- you can have a comment here, just no whitespace--></ul>
  </div>
</div>
answer2: 回答2:

Using CSS3 box-sizing property will solve your problem.

CSS

div.container {
    border: 2px solid #888;
    border-radius: 5px;
    overflow: hidden;
}
ul.tab {
    padding: 0;
    margin: 0;
}
ul.tab > li {
    background-color: #f0f0f0;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    border-top-right-radius: 5px;
    color: #888;
    list-style: none;
    padding: 10px;
    float: left;
    width: 33.3334%;
    box-sizing: border-box;
}
ul.tab > li:last-child {
    border-right: none;
}
ul.tab > li.active {
    background-color: #888;
    color: #fff;
}

HTML

<div class="container">
<ul class="tab">
<li class="active">PRODUCT DETAILS</li>
<li>DELIVERY DETAILS</li>
<li>REVIEWS</li>
</ul>
<br><br><br><br><br><br>
</div>

JSFIDDLE: http://jsfiddle.net/yd6ao3d4/

使用CSS3 box-sizing属性会解决你的问题。

CSS

div.container {
    border: 2px solid #888;
    border-radius: 5px;
    overflow: hidden;
}
ul.tab {
    padding: 0;
    margin: 0;
}
ul.tab > li {
    background-color: #f0f0f0;
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    border-top-right-radius: 5px;
    color: #888;
    list-style: none;
    padding: 10px;
    float: left;
    width: 33.3334%;
    box-sizing: border-box;
}
ul.tab > li:last-child {
    border-right: none;
}
ul.tab > li.active {
    background-color: #888;
    color: #fff;
}

HTML

<div class="container">
<ul class="tab">
<li class="active">PRODUCT DETAILS</li>
<li>DELIVERY DETAILS</li>
<li>REVIEWS</li>
</ul>
<br><br><br><br><br><br>
</div>

JSFiddle:http://jsfiddle.net/yd6ao3d4/

html  css  wordpress