链接中两个跨度之间的空间不可点击

Question

我有以下html代码：

<a href="#">
 <span class="span1">test</span><span class="span2">test</span>
</a>

和css代码：

.span1{float: left; }
.span2{float: right; }

所以链接是test test，“test”和“test”这两个词之间有大约 40px 的空间。我只是使用 css 创建了空间，而不是通过   或使用键盘输入空间。

“test”和“test”这两个词都可以点击，但它们之间的空格不是。

如何使两个跨度之间的空间可点击？我试图将两个跨度标签包装在另一个跨度标签中，但没有帮助。

谢谢。

Answer 1

因为spans 被强制进入block 显示（由于给了它们float 属性），您需要确保a 也有block 显示和overflow: hidden 或clearfix 这样它肯定会完全包含其内容所占用的空间（和中间空间）：

a {
    display: block;
    *zoom: 1;
}
a:after {
    clear: both;
    content: " ";
    display: table;
}
.span1 {
    float: left;
}
.span2 {
    float: right;
}

编辑：基于 IE7 中报告的怪异：

*+html a * {
    cursor: pointer;
}