Установка ширины и высоты тега 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. Преимущество этого заключается в том, что он устанавливает высоту и ширину, как элемент блока, но также устанавливает его встроенным, чтобы рядом с ним мог быть еще один тег a, разрешающий родительское пространство.

Вы можете узнать больше о свойствах дисплея здесь

Все эти предложения работают, если вы не поместите якоря в список UL.

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

Затем любые правила каскадных таблиц стилей отменяются в браузере Chrome. Ширина становится автоматической. Затем вы должны использовать встроенные правила CSS непосредственно в самой привязке.

Это не точный дубликат (насколько я могу найти), но это обычная проблема .

display:blockэто то, что вам нужно. но вы должны прочитать спецификацию, чтобы понять почему.

Ниже работает для меня

display: block;
width: 100%;