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

Question

我有一个背景img 120x30，但它不显示在全尺寸..为什么？

请看这里http://f1u.org/en - 在每篇文章的readmore按钮下。

Answer 1

<a>是inline element。所以，inline element在其中并不采取height, width , vertical margin & vertical padding。

然后我们在css这样来定义display:block：

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

Answer 2

添加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 3

的一个标记是内联元素这样的宽度将不适用，它们会自动根据内容调整大小。如果将显示更改为阻止，则可以控制元素的宽度和高度，并应该看到图像。你可能也想浮动它们，所以如果你有评论链接并阅读更多链接，它们将并排显示。以下添加到您的样式表：

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