Question

我创建了一个顶部栏，其中包含height: 50px，然后是一个锚元素，锚点元素的填充应该与顶部栏高度完全相同。

在主流浏览器中测试代码， Firefox 已经给出了top bar到anchor元素的精确像素高度，但在 Chrome 和 IE 中，它有-1px的结果。 Fiddle Here

HTML：

<div > <a href="">Text Here</a> </div>

CSS：

div {
    width: auto;
    height: 50px;
    background-color: #333;
}
a {
    padding: 10px;
    display: inline-block;
    font-size: 24px; /* Adjusting this would affect element block size */
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}
a:hover { background-color: green; }

我如何填充<a>锚元素的尺寸直到div的高度？

Answer 1

由于似乎没有人向您显示box-sizing css属性：将以下内容添加到<a>

height:100%;
box-sizing:border-box;

修改：

要垂直对齐内容：在display table-cell元素上使用<a>，在其父元素上使用display: table。

div { width: auto; height: 100px; background-color: #333; } a { padding: 10px; display: table; font-size: 24px; color: white; font-family: 'Bebas Neue'; background-color: #777; height: 100%; box-sizing: border-box; } a > span { display: table-cell; vertical-align: middle; } a:hover { background-color: green; }

<div> <a href=""><span>Text Here</span></a> </div>

Fiddle Here

Answer 2

这是另一种方式： -

小提琴：http://jsfiddle.net/nikhilvkd/4YQtA/3/

a {
    height: 30px;/*changes here*/
    padding:10px;
    display: inline-block;
    font-size: 24px;
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}

Answer 3

div {
    width: auto;
    height: 50px;
    background-color: #333;
}
a {
    padding: 0 10px;    
    height: 50px;
    line-height: 50px;
    display: inline-block;
}

Answer 4

我发现的技术是在0元素的顶部和底部使用padding <a>，然后使用height: 100%填充高度尺寸并使用{{ 1}}调整文本。

将这些CSS属性更改为：

line-height: 200%

Fiddle Here

如何在html中将锚元素的高度填充到100％？

4 个答案: