我在borders和background color面临一个奇怪的问题。如果我将border应用于div left，那么它会在最右边留下一些空格。因此background color对于第一个处于活动状态的标签不会延长100％。
.col-3 {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: top;
width: 26.1%;
}
.tabs .col-3 {
border-left: 2px solid #ffffff;
cursor: pointer;
}
.col-3.active {
background: #505050;
}
.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1200px;
}<div class="full-width container tabs">
<div class="main-container active">
<div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
<h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
<div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
<div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
</div>
</div>
我做错了什么。任何帮助都非常感谢。
答案 0 :(得分：1)
您的.col-3标签设置为display: inline-block;。
具有此类显示规则的兄弟姐妹将始终在彼此之间生成空格。
有多种方法可以解决此问题，您可以在float: left;上尝试.tabs .col-3。
查看CSS-TRICKS中的这篇着名文章，了解抵消内联块空白的多种方法：
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
答案 1 :(得分：1)
如果没有边框，差距仍然存在，你只是没有看到它，因为一切都是相同的灰色。
空间存在的原因是因为元素是内联的并且对空白区域敏感。您可以向左浮动它们或删除空格：
.col-3 {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: top;
width: 26.1%;
}
.tabs .col-3 {
border-left: 2px solid #ffffff;
cursor: pointer;
}
.col-3.active {
background: #505050;
}
.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1200px;
}<div class="full-width container tabs">
<div class="main-container active">
<div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
<h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div><!--
--><div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div><!--
--><div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
</div>
</div>
飘来：
.col-3 {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: top;
width: 26.1%;
float:left;
}
.tabs .col-3 {
border-left: 2px solid #ffffff;
cursor: pointer;
}
.col-3.active {
background: #505050;
}
.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1200px;
}<div class="full-width container tabs">
<div class="main-container active">
<div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
<h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
<div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
<div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
</div>
</div>
div之间删除了空格：
.col-3 {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: top;
width: 26.1%;
}
.tabs .col-3 {
border-left: 2px solid #ffffff;
cursor: pointer;
}
.col-3.active {
background: #505050;
}
.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1200px;
}<div class="full-width container tabs">
<div class="main-container active">
<div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
<h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div><div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div><div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
</div>
</div>
答案 2 :(得分：1)
问题是display:inline-block;。它造成了一些额外的空间which can be removed。或者，您可以使用float:left;代替display:inline-block;。如果您使用bootstrap，则不需要将display:inline-block分配给.col-3。
.col-3 {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: top;
width: 26.1%;
}
.tabs .col-3 {
border-left: 2px solid #ffffff;
cursor: pointer;
}
.col-3.active {
background: #505050;
}
.container {
margin: 0 auto;
max-width: 1280px;
overflow: hidden;
position: relative;
}
.full-width {
background: #dfdedb none repeat scroll 0 0;
width: 100%;
}
.main-container {
margin: 0 auto;
max-width: 1200px;
}<div class="full-width container tabs">
<div class="main-container active">
<div data-id="tab-1" class="col-3 first text-center padding-top-bottom-small active">
<h3 class="lato-reg mediumfontx4 orange">How to Sell <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div><!--
--><div data-id="tab-2" class="col-3 second text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Finance <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div><!--
--><div data-id="tab-3" class="col-3 text-center padding-top-bottom-small">
<h3 class="lato-reg mediumfontx4 orange">Market Intelligence <span class="deep-grey padding-left-tiny plus">+</span></h3>
</div>
</div>
</div>
答案 3 :(得分：1)
使用float:left与.col-3
这是DEMO