Rumah > Artikel > hujung hadapan web > Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain
Katakan kita mempunyai P, Q,R,S,T yang dijajarkan di tengah-tengah halaman web −
P Q R S T
Kami mahu perkara di atas kekal sama, kecuali yang paling kanan iaitu T bergerak ke kanan, seperti ini −
P Q R S T
Sekarang mari kita lihat beberapa contoh untuk melaksanakan perkara yang kita lihat di atas.
Susun atur di atas boleh dicapai pada halaman web dengan menggunakan margin automatik dan item flex tidak kelihatan baharu −
<html> <title>Example</title> <head> <style> li:first-child { margin-right: auto; visibility: hidden; } li:last-child { margin-left: auto; background: orange; } ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 3px; padding: 10px; background: red; } p { text-align: center; margin-top: 0; } </style> <head> <body> <ul> <li>T</li> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> </ul> </body> <html>
Dalam contoh ini, kita akan menggunakan unsur pseudo dengan lebar yang sama dengan T. Gunakan ::sebelum meletakkannya di permulaan bekas.
Terjemahan bahasa Cina bagiMari kita lihat contoh sekarang−
<html> <title>Example</title> <head> <style> ul::before { content: "T"; margin: 1px auto 1px 1px; visibility: hidden; padding: 5px; background: orange; } li:last-child { margin-left: auto; background: orange; } ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 3px; padding: 10px; background: red; } </style> <head> <body> <ul> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> </ul> </body> <html>
Dalam contoh ini, buat grid dengan berbilang lajur Kemudian letakkan item anda di lajur tengah dan hujung.
<html> <title>Example</title> <head> <style> ul { display: grid; grid-template-columns: 1fr repeat(4, auto) 1fr; grid-column-gap: 5px; justify-items: center; } li:nth-child(1) { grid-column-start: 2; } li:nth-child(5) { margin-left: auto; } ul { padding: 0; margin: 0; list-style: none; } li { padding: 10px; background: red; } p { text-align: center; } </style> <head> <body> <ul> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> </ul> </body> <html>
Atas ialah kandungan terperinci Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!