如何删除内联块（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

您的边框的原始高度为<li>，原因如此。

使用css属性box-sizing:border-box将其合并为原始高度。

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

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;