代码之家 › 专栏 › 技术社区 › Echo says Reinstate Monica

如何设计锚点标签的样式,使其看起来像一个与按钮高度相同的按钮?

jquery-ui css

Echo says Reinstate Monica · 技术社区 · 17 年前

我正在努力将我网站上的按钮更改为jquery ui主题的样式。大体上一切进展顺利。

.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>

2 回复 | 直到 17 年前

mercator 17 年前

这应该可以做到:

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 财产。

FelipeAls 17 年前

边界和对齐是不推荐使用的属性,或者至少这些属性是关于呈现的,而不是内容,因此应该在CSS中完成,而不是在HTML代码中:

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

也, 替代是img元素的强制属性。可以为空(alt=“”表示花哨但无意义的图像)或有意义(如果图像传达的信息尚未出现在文本中)

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Nuñito Calzada · JQuery在spring boot和Thymelaf中从DB自动完成

2 年前

Connor · 使用jquery UI幻灯片制作周围动画

2 年前

provance · 如何获得最新版本的jquery ui?

2 年前

Akhilesh · 当数据目标中有分号或冒号时,带有展开的aria的Button元素不展开

3 年前

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

8 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

8 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

8 年前

Paili · 如何在jQuery自动完成中添加其他内容?

8 年前

monu · 动态嵌套选项卡创建

8 年前