html - 如何在 元素上对齐边框？

Question

我试过了 this但是 box-sizing 不起作用。

Flexbox 可以工作，但文本不是垂直居中的。所以我在div容器中添加了align-items: center，但是后来的情况和一开始一样。

伪元素也不起作用。

我想要纯 CSS 解决方案，但请避免 float 解决方案。

a {
  color: black;
  text-decoration: none;
  display: inline-block;
}
a:first-child {
  padding: 1em;
  border: 0.2em solid #111;
}
a:last-child {
  padding: 1em;
  color: white;
  background-color: black;
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>

CODEPEN

Answer 1

这里有一个快速简单的解决方法:

您只将黑色边框规则应用于一个框:

a:first-child {  
    padding: 1em;   
    border: 0.2em solid #111;
}

相反，将规则应用于两个框:

a {
  color:black;
  text-decoration: none;
  display: inline-block;
  border: 0.2em solid #111;
}
a:first-child {  
  padding:1em;   
}
a:last-child {
  padding: 1em;
  color: white;  
  background-color: black;  
}

<div>
  <a href="#">BTN 01</a>
  <a href="#">BTN 02</a>
</div>