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

Question

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

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

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

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

Answer 1

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

Answer 2

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

display:block - это то, что вам нужно. но вы должны read the spec понять, почему.

Answer 3

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

Вы можете узнать больше о display properties here

Answer 4

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

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

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