一个类，宽度问题。高度和边距

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。如果您确实使用浮球，请确保正确清除它们。