Установка ширины и высоты тега A

Question

Можно ли установить ширину и высоту в пикселях для тега привязки?Мне бы хотелось, чтобы тег привязки имел фоновое изображение при сохранении текста внутри привязки.

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

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

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

Answer 1

Вам нужно сделать якорь display: block или display: inline-block;, и тогда он примет значения ширины и высоты.

Answer 2

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

Подробнее о свойствах экрана можно узнать здесь

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

display: block;
width: 100%;