锚标签高度值不会改变

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

将锚标记包裹在<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>

编辑：锚标记采用其中任何内容的大小。因此，如果要格式化链接的高度，请更改其中div的高度。

Answer 2

您需要了解框模型如何适用于块元素。请记住，添加填充时，您将添加填充量到框的宽度和高度。这就是为什么你实际上在你期望的范围内得到30px的差异。

http://www.w3schools.com/css/css_boxmodel.asp

通过使用盒装尺寸，可以解决这个问题。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

在您的示例中，您将使用：

  -moz-box-sizing: border-box;
       box-sizing: border-box;

Answer 3

嘿，你可以尝试这个解决方案，这样你可以给锚定高度。 ：）

http://jsfiddle.net/akshaybhende/6hk4n4b1/

//CODE

<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{
   display:block;
    height: 40px;
    padding: 15px;
    line-height:40px;
    width: 200px;
    background: #eab63e;
    color: white;
    text-align:center;
    text-decoration:none;
 }