时间戳

首页 > 解决方案 > seems `border-box` not working with inline-block of `a` tag

html - seems `border-box` not working with inline-block of `a` tag

问题描述

I am trying to integrate the box-sizing but seems not working. any one help me to understand the issue here..

Live Demo

a{
  display:inline-block;
  background:#fff;
  border:1px solid #ccc;
  box-sizing:border-box;
  padding:1rem;
}

a.active{
  border:0;
  background:orange;
}
<a class="active" href="#">EN</a><a href="#">FR</a>

标签： htmlcss

解决方案

代码中有两个主要问题：首先，正如@Daniel 在他的回答中指出的那样，元素的尺寸必须明确，以防止自动调整大小。此外，如this answer中所述，inline-block元素与border-box大小冲突，但有几种解决方法。

一方面，CSS 属性overflow: hidden也可以添加到相关元素中。或者，可以使用vertical-align: top以确保所有元素具有相同的基线。下面可以看到一个功能示例，用更大的边框来强调：

a{
  display:inline-block;
  background:#fff;
  border:10px solid #ccc;
  box-sizing:border-box;
  width:5em;
  height:5em;
  overflow:hidden;
  padding:1rem;
}

a.active{
  border:0;
  background:orange;
}
<a class="active" href="#">EN</a><a href="#">FR</a>

推荐阅读