Встановлення ширини та висоти для тегу A

Чи можна встановити ширину та висоту в пікселях на якорному тезі? Я хотів би мати тег прив’язки, щоб він мав фонове зображення, зберігаючи текст усередині якоря.

li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}

<li><a href="#">Something</a></li>

Вам потрібно зробити якір display: blockабо display: inline-block;тоді він прийме значення ширини та висоти.

Ви також можете використовувати display: inline-block. Перевагою цього є те, що він встановить висоту та ширину, як елемент блоку, але також встановить його в рядку, щоб ви могли мати ще один тег, що сидить поруч, дозволяючи батьківському простору.

Більше про властивості відображення можна дізнатися тут

Усі ці пропозиції працюють, якщо ви не помістите якорі всередині списку UL.

<ul>
    <li>
        <a>click me</a>>
    </li>
</ul>

Тоді будь-які правила аркуша каскадного стилю перекриваються в браузері Chrome. Ширина стає автоматичною. Потім потрібно використовувати вбудовані правила CSS безпосередньо на самому якорі.

Це не точний дублікат (наскільки я можу знайти), але це звичайна проблема .

display:blockце те, що вам потрібно. але ви повинні прочитати специфікацію, щоб зрозуміти, чому.

Нижче працює для мене

display: block;
width: 100%;