Почему добавление float: left к моему css делает мою ссылку неактивной? - PullRequest
Новая
       2

Почему добавление float: left к моему css делает мою ссылку неактивной?

26 голосов
/ 10 декабря 2010

У меня есть вид с определенным таким образом разделом: 

<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 и веб-разработке, но добавил это в мою таблицу стилей: 

#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, которая показывает проблему.Только вопрос стилизован и показывает проблему, ссылки на ответы работают нормально ...

Ответы [ 4 ]

63 голосов
/ 10 декабря 2010

Исправление довольно простое и кросс-браузерное, добавьте это (к вашей не кликабельной ссылке): 

#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, работало как всегда!

18 голосов
/ 10 декабря 2010

Обычная причина в том, что сверху есть прозрачный слой.Обычно это происходит, когда поле шире, чем вы думаете, и имеет прозрачную рамку / отступ.Используйте CSS, чтобы применить временную границу ко всем элементам, и вы убедитесь, что это так.

Обновление № 1 

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

Обновление № 2

Я вижу, что #QuestionEditLink и #QuestionHistoryLink плавают.Это означает, что они больше не используют пространство в потоке страницы.Поэтому, когда вы отображаете #AskingUser следующий, он начинается в той же точке и, будучи последним на странице, он отображается поверх двух других полей.

Ваш макет выглядит полностью вертикальным.Полагаю, вам вообще не нужен float: left.

Кстати, у вас много дубликатов.

2 голосов
/ 10 декабря 2010

Ваш код будет недействительным, так как вы используете идентификаторы, когда это должно быть заданием для занятий.Это будет делать то, что вы хотите: 

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

и добавить 

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

Я оставил это как идентификаторы, но вы должны настроить все свои CSS и HTML так, чтобы они вместо этого были классами

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

, если это имеет смысл.

2 голосов
/ 10 декабря 2010

ммм звучит как простая ошибка, часто встречающаяся с несколькими числами с плавающей запятой, вы можете попробовать добавить очищающий элемент после ссылок, я бы использовал что-то вроде 

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

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

, который должен быть довольно кроссбраузерным, вам может понадобиться добавить внутрь, чтобы его 

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