如何正确填充 HTML 链接？

Question

我有这个 html 和 css 代码：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div.container{
                border: 1px solid #F00;
            }
            a.padded
            {
                font-size: 14px;
                font-weight: bold;
                text-decoration: none;
                background-color: #F0F0F0;
                border: 1px solid #666666;
                padding: 15px;
                margin: 10px;
                border-radius: 5px;
                box-shadow: #CCC 2px 2px 2px;
                color: #333333;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <a href="#" class="padded">my padded link</a>
        </div>
        <div>Some other content</div>
    </body>
</html>

我期望填充链接包含在它的父 DIV 块中，其中 DIV 将扩展到填充链接的任何高度。 然而，似乎链接填充被 DIV 和页面上的所有其他内容忽略了。

为什么会发生这种情况以及如何正确填充链接？

Answer 1

你需要做的是，给你的锚标签一个display:block属性。

a.padded {
   display: block;
   /* display:inline-block; should 
      work too but is not supported in some version of IE */
}

Answer 2

锚标记是内联对象。

添加display: inline-block; 到.padded. 它应该可以工作。

http://jsfiddle.net/6h7MY/

Answer 3

因为我最近问过自己这个问题，所以这篇文章对为什么会发生这种情况有很大帮助。 相关位是：

The W3C’s CSS2 spec states that for Inline, non-replaced elements,
the ‘height’ property doesn’t apply, but the height of the box is given
by the ‘line-height’ property.

如何正确填充 HTML 链接？

问题描述

3 个解决方案

解决方案1
2 已采纳 2011-07-17 23:56:26

解决方案2
2 2011-07-17 23:57:57

解决方案3
1 2011-07-18 01:54:36

如何正确填充 HTML 链接？

问题描述

3 个解决方案

解决方案1 2 已采纳 2011-07-17 23:56:26

解决方案2 2 2011-07-17 23:57:57

解决方案3 1 2011-07-18 01:54:36

解决方案1
2 已采纳 2011-07-17 23:56:26

解决方案2
2 2011-07-17 23:57:57

解决方案3
1 2011-07-18 01:54:36