web-dev-qa-db-ja.com

cssにfloat：leftを追加すると、リンクがクリックできなくなるのはなぜですか？

このように定義されたセクションを持つビューがあります。

<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を使用して2つのリンクを並べて、クリックできるようにするにはどうすればよいですか？

編集：

この動作はchrome 8.0.552.215とfirefox3.6にあります。IE 8、迷惑なことに、期待どおりに機能します。

EDIT2：

このページをJSBinに追加しました： http://jsbin.com/odefa4/edit これは問題を示しています。質問だけがスタイル設定され、問題が表示されます。回答へのリンクは問題なく機能します...

csshyperlinkcss-float
28
Sam Holder

通常の理由は、上に透明なレイヤーがあることです。これは通常、ボックスが思ったより広く、透明な境界線/パディングがある場合に発生します。 CSSを使用してすべてのアイテムに一時的な境界線を適用すると、それが当てはまるかどうかを確認できます。

更新＃1

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

アップデート＃2

#QuestionEditLinkと#QuestionHistoryLinkが浮いていることがわかります。これは、ページフローでスペースを使用しなくなったことを意味します。したがって、次に#AskingUserを表示すると、同じポイントから始まり、ページの最後のボックスであるため、他の2つのボックスの上に表示されます。

レイアウトは完全に垂直に見えます。 float: leftはまったく必要ないと思います。

ところで、重複するIDがたくさんあります。

18
Álvaro González

修正は非常に簡単で、クロスブラウザでもあります。これを（クリックできないリンクに）追加してください。

#QuestionEditLink, #QuestionHistoryLink {
    position: relative;
    z-index: 10;
}

ここでの修正はz-indexですが、positionが相対/絶対/修正されていない場合は機能しません。

z-indexの詳細については、 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index を参照してください。

これはずっと使っていて、シンプルで、allブラウザ（IE6 +、FF、Chrome、Safari、Opera）で動作します。

他の人があなたのCSSの問題についてすでに言っているので、私はそれに追加しません。ちなみに、ソリューションを提供するだけで、提供されたJSBinでテストし、いつものように機能しました。

63
jolt

うーん、複数のフロートでよく見られる単純なバグのように聞こえます。リンクの後にクリア要素を追加してみてください。

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

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

かなりクロスブラウザである必要があります。内部に追加する必要がある場合があります。

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

これがクラスの仕事であるはずのときに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>

それが理にかなっているなら。

2
Ross