我正在尝试通过使用CSS处理超链接并在其旁边添加一个小图标来创建一个可单击按钮。除了一个细节之外的一切都很有效;即略微偏离按钮上文字的图标。它看起来如下:
正如您所看到的,按钮上的白色图标(12x12px)略高于文本,触摸超链接的CSS边框,而文本的其余部分则没有。
我已经尝试了所有想到的解决方案,包括对图像元素应用垂直对齐(这使得图标太靠近LOWER边框,反转情况),但遗憾的是无法将它排成一行很好地与元素中间的文本。我该怎么办?
有问题的代码:
按钮的HTML示例:
<td class="headerlinks">
<a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.png" alt="*" /> {L_LOGIN_LOGOUT}</a>
</td>
按钮的CSS:
.headerlinks {
margin: 0px 0px;
font-size: 1.1em;
line-height: 200%;
}
.headerlinks a img {
}
.headerlinks a {
white-space: nowrap;
border: 1px solid #FAE000;
padding: 1px 4px 2px 4px;
border-radius: 4px;
margin: 0px;
background-color: #000;
vertical-align: middle;
}
答案 0 :(得分:2)
您使用的是CSS重置吗?您可以尝试以下方法。
http://meyerweb.com/eric/tools/css/reset/
最好使用background-image
作为图标,并在其上设置一个位置。
答案 1 :(得分:1)
如果您将margin-top:2px;
添加到图标类,这应该有用。这个数字可能需要移动一两位数。
如果你保持静态font-size
,这将有效。