如何对齐 <a> 元素的边框？答案

【问题标题】：How to align borders on <a> element?如何对齐 <a> 元素的边框？
【发布时间】：2017-04-27 16:12:27
【问题描述】：

我尝试了this，但box-sizing 不起作用。

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

伪元素也不起作用。

我想要一个纯 CSS 解决方案，但请避免使用浮动解决方案。

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

【问题讨论】：

box-sizing 只有在您首先指定宽度和高度时才会生效。在这里你没有，但让元素尺寸仅由它们的内容和填充确定。但是为什么不简单地为第二个链接添加一个与背景相同宽度、相同颜色的边框呢？达到同样的效果...
为什么不在第二个按钮上设置黑色边框？ border:0.2em solid #000;codepen.io/anon/pen/NbLzML
或者，添加：padding:0.8em;到第一个。
@nevermind 也在想同样的事情
哦...好吧，我从没想过._。感谢您的解决方案@j08691

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

使用插入框阴影

a{
  color:black;
  text-decoration:none;
  display:inline-block;
}
a:first-child{  
  padding:1em;   
  box-shadow: inset 0 0 0 0.2em black;
}
a:last-child{
  padding:1em;
  color:white;  
  background-color:black;  
}

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

【讨论】：

虽然有几个简单的解决方案我也喜欢这个，但是有没有办法去掉那个小灰线？
小灰线是由非整数大小引起的。 0.2em 相当于 3.2px。默认情况下，浏览器会截断边框宽度，使用抗锯齿渲染阴影。可能你不能以像素为单位设置大小？（作为旁注，在您的情况下，它消失的大小正好为 3px => 0.1875em）

【解决方案3】：

透明边框颜色

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

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

【讨论】：