Bir A etiketinde genişlik ve yükseklik ayarlama

Bir bağlantı etiketinde piksel cinsinden genişlik ve yüksekliği ayarlamak mümkün müdür? Bağlantı içindeki metni korurken bağlantı etiketinin bir arka plan resmine sahip olmasını istiyorum.

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

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

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

Eğer çapa yapmak gerekir display: blockya display: inline-block;ve sonra genişlik ve yükseklik değerlerini kabul eder.

Ayrıca kullanabilirsiniz display: inline-block. Bunun avantajı, yüksekliği ve genişliği bir blok elemanı gibi ayarlayacak ve aynı zamanda satır içi olarak ayarlayacak, böylece hemen yanında oturan ve ebeveyn boşluğuna izin veren başka bir etiketiniz olabilir.

Görüntüleme özellikleri hakkında daha fazla bilgiyi burada bulabilirsiniz

Bağlantıları bir UL listesine koymadığınız sürece tüm bu öneriler işe yarar.

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

Ardından, tüm basamaklı stil sayfası kuralları Chrome tarayıcısında geçersiz kılınır. Genişlik otomatik hale gelir. Daha sonra satır içi CSS kurallarını doğrudan bağlantının üzerinde kullanmalısınız.

Kesin bir kopya değil (bulabildiğim kadarıyla), ancak bu yaygın bir sorundur .

display:blockihtiyacın olan şey. ancak nedenini anlamak için özellikleri okumalısınız .

Aşağıda benim için çalışıyor

display: block;
width: 100%;