所以我有一个带有边框的父div中带有边框的子div。子div有3个选项卡,宽度为33.3334%。但是在子边框和父边框之间的选项卡末尾有一个小间隙。看图:
我需要摆脱这个差距,以便父母的边界是唯一可见的边界。使标签宽度更大将第3个推到下一行。
有人可以帮忙吗?
由于
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>