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。

BTW，你有很多重复的ID。

Answer 3

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

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

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

应该是相当跨浏览器，你可能需要添加内部所以

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

Answer 4

当您使用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>

如果这是有道理的。

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

4 个答案: