所以我的问题是我无法弄清楚如何摆脱图像中的这条白线。请有人至少告诉我为什么会这样。我试图摆脱它,但我没有成功。我试过检查元素,那里没有边框。它非常令人沮丧。 这是该元素的html(它是一个flex项)。
<div class="section-packages-flex">
<div class="section-packages-item">
<div class="section-packages-image">
<h3 class="package-heading"><span class="package-underline">Package 1</span> <br /><span class="orange">The Zebra</span></h3>
<img class="img-responsive" alt="Package 1 - The Zebra Package" src="_images/package-2.png">
</div>
<div class="section-packages-content">
<div class="section-package-content-full">
</div>
<div class="section-package-content-split">
</div>
<div class="section-package-content-split">
</div>
</div>
<div class="section-packages-pricing orange-background">
<h3>R 2500.00</h3>
</div>
</div>
这是css。 背景
.orange-background {
background: rgba(245,123,32,1.00);
background-color: rgba(245,123,32,1.00);
}
父容器:
.section-packages-flex {
display: flex;
display: -webkit-flex;
flex-flow: column wrap;
-webkit-flex-flow: column wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.section-packages-item {
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.section-packages-pricing {
width: 20%;
color: rgba(255,255,255,1.00);
display: flex;
display: -webkit-flex;
flex-flow: column wrap;
-webkit-flex-flow: column wrap;
justify-content: center;
-webkit-justify-content: center;
text-align: center;
border-left: 1px solid rgba(88,88,88,0.00);
border-top: 1px solid rgba(88,88,88,1.00);
}
答案 0 :(得分:-1)
我刚添加了一个负边距值来摆脱它。