Как установить ширину текста тега привязки с помощью CSS?

Question

У меня есть HTML и CSS, как показано ниже -

    .title {
        display: block; background-color: red;
    }

<a href="#">
    <span class="title">Text</span>
</a>

Я мог видеть, что SPAN охватывает 100% доступной ширины (из-за display: block). Как ниже

|----------------------------------------------------|
| Text                                               |
|----------------------------------------------------|

В Firefox я могу щелкнуть в любом месте вышеупомянутого поля, и оно приведет меня на связанную страницу. Тем не менее, в IE (IE 7) я получаю курсор в виде руки только тогда, когда нахожу только текст «Текст».

Что мне нужно сделать, чтобы заставить его работать (так же, как в FF) в IE?

Я попытался поместить сам тег привязки (не только текст) в span, но он не будет работать.

Спасибо.

Answer 1

Стиль якоря и удалить пролет.

(Проблема связана с тем, что некоторые браузеры обрабатывают элементы, которые display: block, внутри элементов, которые display: inline. Вы можете обойти это, стилизовав привязку и диапазон, но диапазон в этом примере выглядит избыточным)

Answer 2

для вашего тега <a>, сделайте стиль "display: block; width: 100%;"

Answer 3

Назначьте стиль для якоря display:block и max-width:30px !important;. Максимальная ширина может быть любой

li a {
    display: block;
    height: 30px;
    max-width: 30px !important;
}

Answer 4

Вы также можете использовать поля или отступы

Answer 5

Удалите лишний интервал и поместите этот класс заголовка на саму ссылку. Затем добавьте ширину: 100%; к css.

Чем меньше разметка, тем лучше, поэтому следует удалить дополнительный интервал.

Answer 6

Определенно, вам нужно удалить диапазон и применить этот класс к тегу привязки. Я не думаю, что вам нужно явно устанавливать ширину на 100%, но я могу ошибаться.