html - 如何删除内联 block (CSS) 的底部 1px？

Question

我会在解释中引用这个截图:

我已经像您在图片中看到的那样设置了选项卡。我希望事件选项卡(图中的主页)下方有一条 1px 的黑线，所以我使用了底部边框。然而，很难看到粉红色背景延伸到整行。我希望粉红色停止在选项卡的底部绘制，如果有边框则不包括边框(所以底部上方仅 1 像素)。

.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>