为什么添加float:left到我的css使我的链接无法点击？

Question

我有一个视图,其中定义了一个部分:

<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;
}

并且嘿presto链接很好地对齐.不幸的是,它们也是不可点击的,实际上光标在移动它们时也不会改变.

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

编辑:

此行为在chrome 8.0.552.215和firefox 3.6中.它的工作方式与我在IE 8中的预期一样令人讨厌.

EDIT2:

我已将页面添加到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测试它,一如既往地工作!

Answer 2

通常的原因是顶部有透明层.这通常是因为盒子比你想象的更宽并且有透明的边框/填充物.使用CSS为所有项目应用临时边框,您将检查是否是这种情况.

更新#1

div, span, p{
    border: 1px solid red;
}

更新#2

我可以看到#QuestionEditLink并#QuestionHistoryLink浮动.这意味着他们不再在页面流中使用空间.因此,当您显示#AskingUser下一个它从同一点开始,并且作为页面上的最后一个,它将显示在另外两个框的顶部.

您的布局似乎是完全垂直的.我认为你根本不需要任何东西float: left.

顺便说一下,你有很多重复的ID.