如何正確填充 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