Bagaimanakah Saya Boleh Memastikan Panjang Sempadan Div Lebih Pendek Daripada Lebarnya?

Mengekalkan Panjang Sempadan dalam Lebar Div

Dalam senario tertentu, anda mungkin menghadapi situasi di mana lebar sempadan elemen, seperti div, melebihi lebar elemen itu sendiri. Untuk menangani perkara ini, kami boleh menggunakan penyelesaian berikut:

Menggunakan Pseudoelements

Pseudoelements menyediakan cara untuk menambah kandungan pada elemen tanpa menjejaskan kandungan atau struktur sebenarnya. Dalam kes ini, kita boleh mencipta unsur pseudo dan meletakkannya dalam div untuk mensimulasikan sempadan yang lebih pendek.

Contoh Pelaksanaan

Pertimbangkan coretan kod berikut:

div {
  width: 200px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: #eee;
}

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100px;
  border-bottom: 1px solid magenta;
}

Dalam contoh ini, kami mencipta unsur pseudo dengan pemilih :before. Pseudoelement diletakkan di sudut kiri bawah div dan diberi lebar 100px, iaitu kurang daripada lebar div. Kami kemudiannya menggunakan sempadan magenta pada unsur pseudo, mencipta ilusi sempadan yang lebih pendek daripada lebar div sambil mengekalkan lebar div asal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Panjang Sempadan Div Lebih Pendek Daripada Lebarnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!