使用相同的CSS屬性不起作用的按鈕和錨標籤

我有以下css風格的按鈕和錨標籤，因爲他們有相同的按鈕樣式，但他們在不同的位置。所以我想給他們相同的CSS，以便他們都將完全相同。但是button.enter文本被按下了。第一個工作正常。它可以使用填充：0，但會影響第一個。任何想法？使用相同的CSS屬性不起作用的按鈕和錨標籤

a.enter, button.enter { 
    text-decoration: none; 
    background: url('../img/enter-button_small.png') no-repeat 0px 0px; 
    height: 35px; 
    padding: 8px 0; 
    text-align: center; 
    color: white; 
    margin: 0 auto; 
    text-shadow: none; 
    font-size: 16px; 
    width: 300px; 
    vertical-align: middle; 
    }

來源

2012-09-04 Alex

只需添加另一種樣式，即可單獨重置按鈕上的填充。你的一些CSS也是不需要的。例如，vertical-align:middle;在這種情況下不做任何事情。

a.enter, button.enter { 
    text-decoration: none; 
    background: url('../img/enter-button_small.png') no-repeat 0px 0px; 
    height: 35px; 
    padding: 8px 0; 
    text-align: center; 
    color: white; 
    margin: 0 auto; 
    text-shadow: none; 
    font-size: 16px; 
    width: 300px; 
} 

button.enter { 
    padding:0; 
}

來源

2012-09-04 11:40:37

嗨感謝，但我一直在尋找爲什麼發生這種情況的原因。它們應該呈現相同的結果，爲什麼當它們都共享相同的CSS屬性時，文本被推下來？ – Alex

按鈕，輸入（提交）在大多數瀏覽器中將文本垂直和水平對齊作爲標準，而無需任何樣式。 ''標籤沒有。給''引入填充，你會在你想要的地方得到文本。按鈕上的填充將文本偏離中心。 –

謝謝大衛，這是我正在尋找的答案！ – Alex

你需要提及margin和padding爲0 coz button有默認的margin和padding。

添加該代碼如下

a.enter, button.enter { 
text-decoration: none; 
background: green url('../img/enter-button_small.png') no-repeat 0px 0px; 
line-height: 35px; 
padding: 8px 0; 
text-align: center; 
color: white; 
margin: 0 auto; 
text-shadow: none; 
font-size: 16px; 
width: 300px; 
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none 
}

這裏的工作演示http://jsfiddle.net/6Ygc2/

來源

2012-09-04 11:42:51 Sowmya

使用相同的CSS屬性不起作用的按鈕和錨標籤

回答

相關問題