为什么在我的 CSS 中添加 float:left 会使我的链接无法点击？答案

【问题标题】：Why does adding float:left to my css make my link unclickable?为什么在我的 CSS 中添加 float:left 会使我的链接无法点击？
【发布时间】：2011-05-23 09:56:26
【问题描述】：

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

<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 中可以正常工作，但很烦人。

EDIT2：

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

【问题讨论】：

您能否链接到该页面，以便我们查看实际问题，可能更容易为您找到解决方案：)
每个浏览器都会出现这种情况吗？如果您希望它们彼此相邻，为什么要使用 div 而不是 Span？我刚刚检查了这个，它在 Chrome 和 IE8 上运行良好，这是你所有的标记吗？
@Treemonkey，它不在任何地方，只在我的开发机器上，所以很遗憾，我无法链接到它...
你能把 HTML n CSS sn-p 添加到 JSBin 吗？
@Shree, @Treemonkey 我添加了一个指向 JSBin 的链接，其中显示了问题（感谢您指出 JSBin shree，不知道存在）

标签： css hyperlink css-float

【解决方案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 对其进行了测试，一如既往地工作！

【讨论】：

从技术上讲，这可能可行，但是（我承认我对 html/web 开发不太了解）但这对我来说感觉很糟糕。也许不是，但它让我的牙齿很紧张，就像我嘴里有棉花一样。我的问题似乎是我为我的链接容器使用了不合适的元素。不过读起来很有趣。
这就是答案，效果很好，非常非常感谢！
哇，多么明显。 :-) CSS 巫毒来救援。完美运行。
这是非常很棒的解决方案。你知道label 元素将点击传递给input 元素，当我们将它包裹在输入周围时（不适用于单行浮动行）或使用for 属性。在移动设备上，我喜欢以这种方式包装输入，因为我可以使标签比输入更大——而且它简化了对输入的点击。我在label 元素上使用margin: -100% 和padding-right: 100%。但它有一个缺点：它覆盖了行右侧的所有浮动元素。您的解决方案是唯一有效的解决方案：stackoverflow.com/a/42542011/84661

【解决方案2】：

您的代码将无效，因为您使用的是 ID，而这应该是类的工作。这会做你想做的事：

#AskingUser {
    border: none;
    float: right;
    width:auto;
    padding: 2px;
    position: relative;
    text-align: right;
}

并添加

#QuestionBody {
    border-bottom: 1px dotted black;
    overflow: hidden;
}

我将其保留为 ID，但您应该调整所有 CSS 和 HTML，以便它们成为类

.askingUser {} 和 <div class="askingUser"></div>

如果有道理的话。

【讨论】：

谢谢罗斯，我会试试这个。是的，我意识到我的 id 应该是类。
虽然这是一个有效的答案，但我已将@Alvaro 标记为已接受的答案，因为我从中学到了更多关于我做错了什么的信息。为指针干杯，但它是最有用的。

【解决方案3】：

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

更新 #1

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

更新 #2

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

您的布局似乎是完全垂直的。我想你根本不需要任何float: left。

顺便说一句，你有很多重复的 ID。

【讨论】：

这听起来像是一个计划。正如我所说，我对这一切都很陌生，那么如何向 CSS 添加一些内容，从而为所有项目添加边框？
感谢 Alvaro，我现在看到了问题（我已经更新了我的帖子以显示更多视图），并且似乎是 AnsweringUser div 在路上。现在如何修复...
是的，我认为我确实需要将 div id 更改为 div 类。第一次做这些东西，昨天在火车上玩，没有互联网。我希望它们流动，但如果没有浮动，它们似乎总是在另一个下方，并且带有链接的 div 似乎没有单独的线围绕它们。谢谢您的帮助。你给了我一些事情要做，以及其他有用的指针
块级元素（<p>、<div>...）默认水平扩展。内联元素（<a>、<span>...）不会。您不需要做任何特别的事情来并排放置链接；只是不要将它们包装在单独的块级标签中。它还有助于使用 HTML 验证器。
我喜欢这个 div、span、p 提示！就像看到矩阵一样。

【解决方案4】：

hmmm 听起来像是一个简单的错误，经常在多个浮动中发现，你可以尝试在链接之后添加一个清除元素，我会使用类似的东西

<b class="clear"></b>

.clear{
float:none;
clear:both;
font-size:0px;
line-height:0px;
height:0px;
}

这应该是相当跨浏览器的，你可能需要在里面添加，所以它的

<b class="clear">&nbsp;</b>

【讨论】：

谢谢你，树猴。我很惊讶您的解决方案没有获得更多选票。它是如此快速和简单。