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

У меня есть следующий html-код:

<a href="#">
 <span class="span1">test</span><span class="span2">test</span>
</a>

и css-код:

.span1{float: left; }
.span2{float: right; }

Таким образом, ссылка test test с пробелом около 40 пикселей между двумя словами «тест» и «тест». Я создал пространство просто с помощью css, а не с помощью &nbsp; или ввода пробела с помощью клавиатуры.

Слова «тест» и «тест» можно щелкнуть, но пробел между ними — нет.

Как я могу сделать пространство между двумя промежутками кликабельным? Я попытался обернуть оба тега span в другой тег span, но это не помогло.

Спасибо.


html hyperlink clickable
person mnish    schedule 31.07.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Поскольку span вынуждены отображать block (благодаря присвоению им float свойств), вам необходимо убедиться, что a также имеет block отображение и overflow: hidden ИЛИ clearfix таким образом, чтобы он точно содержал пространство (и промежуточное пространство), занимаемое его содержимым:

a {
    display: block;
    *zoom: 1;
}
a:after {
    clear: both;
    content: " ";
    display: table;
}
.span1 {
    float: left;
}
.span2 {
    float: right;
}

EDIT: на основании сообщений о странностях в IE7:

*+html a * {
    cursor: pointer;
}
person Barney    schedule 31.07.2013
comment
Спасибо за ваш ответ, это хорошо работает в firefox, ie10, ie9, ie8. Но в ie7 ведет себя странно, ссылка кликабельна, но курсор меняется с указателя на текст при наведении на тесты двух слов. поэтому я добавил span{cursor: pointer;} - person mnish; 01.08.2013
comment
@mnish странно! Я добавлю это к своему ответу, чтобы сделать его полным… - person Barney; 01.08.2013