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

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

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

и hey presto ссылки были хорошо выровнены. к сожалению, они также не являются кликабельными, и на самом деле курсор не изменяется при перемещении по ним.

Так что же я сделал не так? как я использую css для выравнивания двух ссылок рядом друг с другом, чтобы они по-прежнему доступны для кликов?

EDIT:

Такое поведение наблюдается в chrome 8.0.552.215 и в firefox 3.6. Он работает так, как я ожидал бы в IE 8, досадно.

EDIT2:

Я добавил страницу в JSBin: http://jsbin.com/odefa4/edit, которая показывает эту проблему. Только вопрос оформлен и показывает проблему, ссылки на ответы работают нормально...

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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