Bagaimana untuk Mencegah Anjakan Mendatar Elemen Sebaris pada Tuding Apabila Tebal?

Selesaikan masalah offset selepas elemen sebaris menjadi lebih tebal apabila melayang

Apabila menggunakan senarai HTML dan CSS untuk mencipta menu mendatar, pengguna boleh Anda akan menghadapi masalah: apabila anda menetapkan pautan menjadi lebih tebal dan lebih tebal apabila digantung, pautan menu akan diimbangi kerana perbezaan ketebalan.

Untuk menyelesaikan masalah ini, kita boleh menggunakan penyelesaian berikut:

Preset lebar

Gunakan elemen pseudo yang tidak kelihatan yang mempunyai kandungan dan gaya yang Sama sebagai gaya hover ibu bapa. Gunakan atribut data (seperti tajuk) sebagai sumber kandungan.

li {
  display: inline-block;
  font-size: 0;
}

li a {
  display: inline-block;
  text-align: center;
  font: normal 16px Arial;
  text-transform: uppercase;
}

a:hover {
  font-weight: bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul>
  <li><a href="#" title="height">height</a></li>
  <li><a href="#" title="icon">icon</a></li>
  <li><a href="#" title="left">left</a></li>
  <li><a href="#" title="letter-spacing">letter-spacing</a></li>
  <li><a href="#" title="line-height">line-height</a></li>
</ul>

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Anjakan Mendatar Elemen Sebaris pada Tuding Apabila Tebal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!