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;
}

显示内联块

<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的引用。如果使用浮子，请确保正确清除它们。

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

3 个答案: