Question

我正在努力将我网站上的按钮更改为由jquery ui主题设计。一切都很顺利。

但是我想要一些锚标签作为按钮。我添加了类，它按照我想要的方式设置它，除了高度不一样。有没有办法让样式化的锚标签与样式化的按钮标签具有相同的高度？

以下是我的一些css：

.mine-button { 
    outline: 0; 
    margin: 0 4px 0 0;
    padding: 0 1em;
    height: 2em;
    text-decoration: none !important; 
    cursor: pointer; 
    position: relative;
    text-align: center; 
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px
}

在按钮上使用它的示例：

<button class="mine-button ui-state-default"
 onclick="stuff here">
    <img src="/i_common/basket_add_24.gif" border="0" align="absmiddle"/> Add
</button>

在achor上使用它的一个例子：

<a class="mine-button ui-state-default" href="bla">
    <img src="/i_common/CD_down_24.gif" border="0" align="absmiddle"/> Free
</a>

Answer 1

这应该这样做：

display: inline-block;

高度不起作用的原因是锚标记标记了内联元素。 The height property doesn't apply to inline elements, and the vertical margin, border and padding act differently

Firefox 2不支持inline-block，如果您仍然需要支持，但您通常可以get it to work之前添加规则display: -moz-inline-box 以上一行。

或者，您可以尝试使用line-height属性。

Answer 2

border 和 align 是不推荐使用的属性，或者至少这些属于演示文稿，而不是内容，因此应该在CSS中完成，而不是在HTML代码中完成：< / p>

.mine-button {
  border: 0;
  vertical-align: bottom/middle/top/whatever;
}

此外， alt 是img元素的必需属性。可以是空的（alt =“”用于幻想但无意义的图像）或有意义的（如果图像传达的信息尚未出现在文本中）

如何将锚标记设置为与按钮高度相同的按钮？

2 个答案: