为什么我的CSS按钮不起作用？

Question

我的背景图片是120x30，但它没有以完整尺寸显示..为什么？

请看这里http://f1u.org/en - 在每篇文章下阅读更多按钮。

Answer 1

添加display: block;

.comments-link, .readmore-link {
        background: url("images/readmore.png") no-repeat scroll 0 0 transparent;
        border: medium none;
        display: block;
        font-size: 11px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        text-indent: 8px;
        text-transform: uppercase;
        width: 120px;
    }

Answer 2

<a>是inline element。因此，inline element不会将height, width , vertical margin & vertical padding放入其中。

然后我们必须在display:block中定义css，如下所示：

.comments-link, .readmore-link {
        display: block;
    }

Answer 3

a标签是内联元素，因此宽度不适用，它们会根据内容自动调整大小。如果将显示更改为块，则可以控制元素的宽度和高度，并且应该看到图像。您可能还想浮动它们，因此如果您有注释链接并阅读更多链接，它们将并排显示。将以下内容添加到样式表中：

.comments-link, .readmore-link {
    display: block;
    float: left;
}