为什么在我的 css 中添加 float:left 会使我的链接无法点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4407878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does adding float:left to my css make my link unclickable?
提问by Sam Holder
I have a view with a section defined thus:
我有一个视图，其中定义了一个部分：
<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>
and this produces a section with some text and a couple of links under it. I wanted the links to be next to each other. I'm new to css and web development but added this to my style sheet:
这会生成一个包含一些文本和下面几个链接的部分。我希望链接彼此相邻。我是 css 和 web 开发的新手，但将其添加到我的样式表中：
#QuestionEditLink
{
color: #666666;
width:auto;
float:left;
padding:2px;
}
#QuestionHistoryLink
{
color: #666666;
width:auto;
float:left;
padding:2px;
}
and hey presto the links were nicely aligned. unfortunately they are also not clickable and in fact the cursor doesn't change when moving over them either.
嘿，这些链接很好地对齐了。不幸的是，它们也无法点击，实际上光标在它们上方移动时也不会改变。
So what did i do wrong? how to I use the css to align the two links next to each other so they are still clickable?
那我做错了什么？如何使用 css 将两个链接彼此对齐，以便它们仍然可点击？
EDIT:
编辑：
This behaviour is in chrome 8.0.552.215 and in firefox 3.6. It works as I would expect in IE 8, annoyingly.
此行为在 chrome 8.0.552.215 和 firefox 3.6 中。它的工作原理与我在 IE 8 中的预期一致，令人讨厌。
EDIT2:
编辑2：
I have added the page to JSBin : http://jsbin.com/odefa4/editwhich shows the issue. Only the question is styled and shows the problem, the links for the answers work ok...
我已将该页面添加到 JSBin：http: //jsbin.com/odefa4/edit，其中显示了该问题。只有问题的样式并显示问题，答案的链接工作正常......
采纳答案by álvaro González
The usual reason is that there's a transparent layer on top. It's normally caused when a box is wider than you think and has a transparent border/padding. Use CSS to apply a temporary border to all items and you'll check whether it's the case.
通常的原因是顶部有一个透明层。这通常是由于框比您想象的要宽并且具有透明边框/填充时引起的。使用 CSS 对所有项目应用临时边框，您将检查是否是这种情况。
Update #1
更新 #1
div, span, p{
border: 1px solid red;
}
Update #2
更新 #2
I can see that #QuestionEditLinkand #QuestionHistoryLinkare floating. That means that they no longer use space in the page flow. So when you display #AskingUsernext it starts at the same point and, being the last one on the page, it gets displayed on top of the two other boxes.
我可以看到，#QuestionEditLink并且#QuestionHistoryLink正在漂浮。这意味着他们不再使用页面流中的空间。因此，当您显示#AskingUsernext 时，它从同一点开始，作为页面上的最后一个，它显示在其他两个框的顶部。
Your layout appears to be fully vertical. I presume you don't need any float: leftat all.
您的布局似乎是完全垂直的。我想你根本不需要任何东西float: left。
BTW, you have lots of duplicate IDs.
顺便说一句，您有很多重复的 ID。
回答by jolt
The fix is pretty simple and cross browser too, add this (to your unclickable link):
修复非常简单并且跨浏览器，添加这个（到你不可点击的链接）：
#QuestionEditLink, #QuestionHistoryLink {
position: relative;
z-index: 10;
}
The fix here is the z-index, but it won't work if positionisn't relative/absolute/fixed.
这里的修复是z-index，但如果position不是相对/绝对/固定，它将不起作用。
For more info on z-indexsee https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
有关更多信息，z-index请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Have used this all the time, is simple, works in allbrowsers (IE6+, FF, Chrome, Safari, Opera).
一直用这个，很简单，适用于所有浏览器（IE6+、FF、Chrome、Safari、Opera）。
Since others already said about your CSS issues there, I won't add to it. Just providing a solution, by the way, tested it with your provided JSBin, worked as always!
由于其他人已经在那里谈到了您的 CSS 问题，因此我不会添加它。顺便说一下，只是提供了一个解决方案，使用您提供的 JSBin 对其进行了测试，一如既往地工作！
回答by Treemonkey
hmmm sounds like a simple bug often found with multiple floats, you could try adding a clearing element after the links i would use something like
嗯听起来像是一个经常在多个浮动中发现的简单错误，您可以尝试在链接之后添加一个清除元素，我会使用类似的东西
<b class="clear"></b>
.clear{
float:none;
clear:both;
font-size:0px;
line-height:0px;
height:0px;
}
that should be fairly cross browser, you may need to add inside so its
这应该是相当跨浏览器的，您可能需要在里面添加
<b class="clear"> </b>
回答by Ross
Your code will be invalid as you are using IDs when this should be a job for classes. This will do what you want:
当您使用 ID 时，您的代码将无效，而这应该是类的工作。这将执行您想要的操作：
#AskingUser {
border: none;
float: right;
width:auto;
padding: 2px;
position: relative;
text-align: right;
}
and add
并添加
#QuestionBody {
border-bottom: 1px dotted black;
overflow: hidden;
}
I've left it as IDs but you should adjust all your CSS and HTML so that they are classes instead
我把它留作 ID，但你应该调整你所有的 CSS 和 HTML，使它们成为类
.askingUser {}and <div class="askingUser"></div>
.askingUser {}和 <div class="askingUser"></div>
if that makes sense.
如果这是有道理的。
