html - anchor 标签高度值不会改变

Question

我尝试了这里列举的所有解决方案:

CSS: anchor will NOT accept height

即设置<a>标记为 display:block和 display:inline-block分别无济于事。

有人有什么想法吗？

https://jsfiddle.net/ebbnormal/wrtu538f/9/

这是我的 HTML:

<div class="search-bar-locations">
   <a href='#' id='center'>
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
   </a> 
  </div>

这是我的 CSS:

 .search-bar-locations a{
   overflow:hidden;
   display:inline-block;
 }

.search-bar-locations #center {
  display:inline-block;
  height: 40px;
  width: 200px;
  background: #eab63e;
  padding: 15px;
  color: white;
}

这是它渲染 <a> 的内容作为 230px X 70px 而不是 200 x 40

Answer 1

把你的 anchor 标签包裹在你外面<div class="search-bar-locations">因此:

<a href='#' id='center'>
  <div class="search-bar-locations">
     SEARCH BY PROGRAM
     <i class='fa fa-sort-desc'></i>
  </div>
</a>

编辑: anchor 标签采用其中任何内容的大小。所以如果你想格式化链接的高度，改变它里面的div的高度。