css - 为什么添加 float :left to my css make my link unclickable?

Question

我有一个这样定义的部分的 View :

<div id="QuestionBody">
        <p><%=ViewData.Model.Body %></p>
        <div id="QuestionEditLink"><%=Html.ActionLink ("Edit","EditQuestion","Question",new {id=Model.QuestionId},null) %></div>
        <div id="QuestionHistoryLink"><%=Html.ActionLink ("History","ShowHistory","Question",new {postId=Model.PostId,questionId=Model.QuestionId},null) %></div>  
        <div id="AnsweringUser"><a href="/Profile/Profile?userName=https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid%3Fid%3DAItOawnZ6IhK1C5cf_9wKstNNfSYIdnRp_zryW4">Answered by Sam</a></div>          
    </div>

这会生成一个部分，其中包含一些文本和下面的几个链接。我希望链接彼此相邻。我是 css 和 web 开发的新手，但将其添加到我的样式表中:

#QuestionEditLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

#QuestionHistoryLink
{
    color: #666666;
    width:auto;
    float:left;
    padding:2px;
}

嘿，很快链接就很好地对齐了。不幸的是，它们也不可点击，事实上光标在它们上方移动时也不会改变。

那我做错了什么？如何使用 css 将两个链接彼此对齐，以便它们仍然可以点击？

编辑:

此行为存在于 chrome 8.0.552.215 和 firefox 3.6 中。它像我在 IE 8 中预期的那样工作，令人讨厌。

编辑2:

我已将页面添加到 JSBin:http://jsbin.com/odefa4/edit这表明了问题。只有问题的样式和显示问题，答案的链接工作正常...

Answer 1

修复非常简单，也可以跨浏览器，添加这个(到你不可点击的链接):

#QuestionEditLink, #QuestionHistoryLink {
    position: relative;
    z-index: 10;
}

此处的修复是 z-index，但如果 position 不是相对/绝对/固定的，它将不起作用。

有关 z-index 的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

一直在使用这个，很简单，适用于所有浏览器(IE6+、FF、Chrome、Safari、Opera)。

既然其他人已经在那里谈到了您的 CSS 问题，我就不再补充了。顺便提供一个解决方案，用你提供的 JSBin 测试它，一如既往地工作!