如何删除内联块(CSS)的底部1px？

Question

我将在我的解释中参考此屏幕截图:

我已经设置了你在图片中看到的标签.我想活动标签(图片中的主页)下面有一条1px黑线,所以我使用了底边框.然而,很难看到,但粉红色的背景延伸到整行.我希望粉红色停止在标签的底部绘制,如果有边框,则排除边框(因此只比底部高1px).

.main_tabs{
    width:100%;
    display:inline-block;
    background:#FFDEFD;
}

li.active a, li.active{ 
    background:#fff;
    color:#4c4c4c;
    border-radius: 3px 3px 0px 0px;
    border-bottom-color:#000000;
    border-bottom-width:1px;
    border-bottom-style:solid;
    transition:all linear 0.4s;
}

上面是我的main_tabs(负责粉红色背景)和活动标签的CSS.在main_tabs中,我尝试过使用背景大小,但它没有改变任何东西.我试图摆弄宽度和显示,但它完全搞砸了我的标签.

Answer 1

.main_tabs {
  background: #FFDEFD;
  list-style: none;
  margin: 0;
  padding: .25em .5em 0;
}

.main_tabs li {
  display: inline-block;
}

.main_tabs a {
  display: block;
  text-decoration: none;
  line-height: 2em;
  padding: 0 .5em;
  background: #DDD;
  border-radius: 3px 3px 0px 0px;
  border-bottom: 1px solid transparent;
  transition: all linear 0.4s;
}

.main_tabs .active a {
  background: #fff;
  color: #4c4c4c;
  border-bottom-color: black;
}

<ul class=main_tabs>
  <li><a href=#>Non active</a></li>
  <li class=active><a>Active</a></li>
</ul>