爲什麼我的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; 
}