为什么添加浮动：离开我的CSS使我的链接无法点击？ [英] Why does adding float:left to my css make my link unclickable?

问题描述

我有一个视图，其中定义了一个部分：

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>

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

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:

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

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

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

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.

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

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?

编辑：

此行为在chrome 8.0.552.215和firefox 3.6中。它在IE 8中的表现非常令人烦恼。

This behaviour is in chrome 8.0.552.215 and in firefox 3.6. It works as I would expect in IE 8, annoyingly.

EDIT2：

我已将页面添加到JSBin： http://jsbin.com/odefa4/edit ，显示了该问题。只有问题被设置并显示问题，答案的链接工作正常...

I have added the page to JSBin : http://jsbin.com/odefa4/edit which shows the issue. Only the question is styled and shows the problem, the links for the answers work ok...

推荐答案

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

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.

更新＃1

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

更新＃2

我可以看到 #QuestionEditLink 和 #QuestionHistoryLink 是浮动的。这意味着他们不再在页面流中使用空间。所以当你显示 #AskingUser 时，它会从同一点开始，作为页面上的最后一个，它会显示在另外两个框的顶部。

I can see that #QuestionEditLink and #QuestionHistoryLink are floating. That means that they no longer use space in the page flow. So when you display #AskingUser next it starts at the same point and, being the last one on the page, it gets displayed on top of the two other boxes.

您的布局似乎是完全垂直的。我认为你根本不需要任何浮动：左。

Your layout appears to be fully vertical. I presume you don't need any float: left at all.

BTW，你有很多重复的ID。

这篇关于为什么添加浮动：离开我的CSS使我的链接无法点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！