一個類，寬度問題。高度和邊距

Question

我想創建按鈕，而不使用CSS3「按鈕」。浮動，高度和寬度不起作用。

a.reply { 
    padding: 20px; 
    background-color: #555; 
    border-radius: 4px; 
    margin-top: 10px; 
    width: 100px; 
    height: 50px; 
} 

a:hover.reply { 
    padding: 20px; 
    background-color: #fff; 
    border-radius: 4px; 
    width: 100px; 
    height: 50px; 
} 

Answer 1

使用內聯塊

a.reply { 
display: inline-block; 
padding: 20px; 
background-color: #555; 
border-radius: 4px; 
margin-top: 10px; 
width: 100px; 
height: 50px; 
} 

Answer 2

width，height，margin可以具有尺寸，又名塊級元件的元件上才起作用。

所以，你需要的display: block，或者display: inline-block旁邊的屬性添加到您的<a>

讓他們給對方，你可以兩件事情：（通知，我修復代碼中的一些CSS問題）

浮子：

<p class="clearfix"> 
    <a href="#" class="reply">foo</a> 
    <a href="#" class="reply">bar</a> 
</p> 

CSS：

.clearfix:after { 
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

a.reply { 
    padding: 20px; 
    background-color: #555; 
    border-radius: 4px; 
    margin-top: 10px; 
    width: 100px; 
    height: 50px; 
    margin-right: 15px; 
    float: left; 
} 

a.reply:hover { 
    background-color: #fff; 
} 

顯示inline-block的

<p> 
    <a href="#" class="reply">foo</a> 
    <a href="#" class="reply">bar</a> 
</p> 

CSS：

a.reply { 
    padding: 20px; 
    background-color: #555; 
    border-radius: 4px; 
    margin-top: 10px; 
    width: 100px; 
    height: 50px; 
    display: inline-block; 
    margin-right: 15px; 
} 

a.reply:hover { 
    background-color: #fff; 
} 

Answer 3

的問題可能是你的HTML，確保它看起來是這樣的：

<a class="reply">yes</a> 
<a class="reply">yes</a> 

似乎工作正常： http://jsfiddle.net/a6EQk/1/

此外，<a>元件通常需要被設置爲顯示：block或inline-block具有任何尺寸。
默認情況下<a>元素設置爲display:inline;。
你可能想看看這樣的解釋：display:inline vs display:block

而且，我看到你的CSS沒有提到一個float。如果您確實使用浮球，請確保正確清除它們。