как установить ширину текста тега anchor с помощью css?

у меня есть html и css, как показано ниже -

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

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

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

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

В Firefox я могу щелкнуть в любом месте в приведенном выше поле, и это приведет меня к связанной странице. Однако в IE (IE 7)я получаю курсор как руку только при наведении курсора на текст" текст".

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

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

спасибо.

6
css firefox html internet-explorer

6 ответов

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

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

15

для <a> тег, сделайте стиль " дисплей: блок; ширина: 100%;"

8

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

0

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

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

0

вы также можете использовать margin или padding

0

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

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