Question

我有一个使用css类的锚元素基本上用图像替换文本。我知道这听起来很奇怪。但是，最终结果看起来是正确的（大多数情况下）。

.toolLink a {   
    overflow:hidden;    
}
.toolEdit 
{
    float:left;
    background:url(/resources/images/edit.png) no-repeat;
    width: 15px;
    height: 15px;
}

我的锚元素如下所示：

<a href="#" class="toolEdit">edit</a>

当包含“float：left”语句时，一切看起来都是正确的。但是，当我删除“float：left”语句时，会出现“edit”一词，图像会缩小。我需要删除float：left因为我需要将内容放在表的列中。但只要float：left就在那里，内容就会向左对齐。我该怎么办？

Answer 1

这应该有用......

您的CSS

.toolEdit 
{
    display:block;
    background:url(/resources/images/edit.png) no-repeat;
    width: 15px;
    height: 15px;
    text-decoration:none;
}

.toolEdit span 
{
  visibility:hidden;
}

你也可以删除溢出：隐藏的样式......不是必需的......

您的HTML

<a href="#" class="toolEdit"><span>edit</span></a>

Answer 2

锚点是内联元素。尝试将display：block添加到.toolEdit类。

你也可以考虑使用div而不是锚，因为锚不会去任何地方，也不会有名字或任何其他锚目的。

编辑：

除非您使用某些javascript删除它，否则“编辑”应该显示。在这种情况下，我建议使用图像而不是使用背景图像交换“编辑”文本。

CSS - 浮动左和锚元素

2 个答案: