Pourquoi l'ajout de float: left à mon css rend mon lien unclickable?

j'ai une vue avec une section définie ainsi:

<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>

et cela produit une section avec du texte et quelques liens sous elle. Je voulais que les liens soient côte à côte. Je suis nouveau au développement css et web mais j'ai ajouté ceci à ma feuille de style:

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

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

Alors qu'ai-je fait de mal? comment utiliser le css pour aligner les deux liens l'un à côté de l'autre pour qu'ils soient toujours cliquables?

EDIT:

EDIT2:

j'ai ajouté la page de JSBin : http://jsbin.com/odefa4/edit qui montre le problème. Seule la question est stylée et montre le problème, les liens pour les réponses fonctionnent bien...

25
demandé sur Sam Holder 2010-12-10 13:29:06
la source

4 ответов

La raison habituelle est qu'il y a une couche transparente sur le dessus. Il est généralement causé quand une boîte est plus large que vous pensez et a une bordure transparente/rembourrage. Utilisez CSS pour appliquer une frontière temporaire à tous les articles et vous vérifierez si c'est le cas.

mise à jour #1

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

mise à Jour #2

je peux voir que #QuestionEditLink et #QuestionHistoryLink flottent. Cela signifie qu'ils n'utilisent plus d'espace dans la page de flux. Donc quand vous affichez #AskingUser ensuite, il commence au même point, et, étant le dernier de la page, il s'affiche au-dessus des deux autres cases.

votre disposition semble être entièrement verticale. Je suppose que vous n'avez pas besoin de tout float: left à tous.

BTW, vous avez beaucoup de duplicata D'IDs.

18
répondu Álvaro González 2010-12-10 14:59:21
la source

La solution est assez simple et multi-navigateur trop, ajouter ceci (à votre unclickable lien):

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

Le correctif est ici z-index, mais il ne fonctionnera pas si position n'est pas relatif/absolu/fixe.

Pour plus d'infos sur z-index voir https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

ont utilisé ceci tout le temps, est simple, fonctionne en navigateurs (IE6+, FF, Chrome, Safari, Opera).

étant donné que les autres j'ai déjà parlé de vos problèmes CSS, Je n'ajouterai rien. Juste fournir une solution, soit dit en passant, testé avec votre jsbin fourni, a fonctionné comme toujours!

61
répondu jolt 2017-12-21 13:46:47
la source

hmmm ressemble à un simple bug souvent trouvé avec plusieurs flotteurs, vous pourriez essayer d'ajouter un élément de compensation après les liens que j'utiliserais quelque chose comme

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

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

cela devrait être assez cross browser, vous pouvez avoir besoin d'ajouter à l'intérieur de sorte que son

<b class="clear">&nbsp;</b>
2
répondu Treemonkey 2010-12-10 13:56:46
la source

votre code ne sera pas valide car vous utilisez des ID alors que cela devrait être un travail pour les classes. Cela va faire ce que vous voulez:

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

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

Je l'ai laissé comme IDs mais vous devriez ajuster tous vos CSS et HTML pour qu'ils soient des classes à la place

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

si cela fait sens.

2
répondu Ross 2010-12-10 15:05:30
la source

Autres questions sur