Rumah > Artikel > hujung hadapan web > Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain
Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain
- WBOYke hadapan
- 2023-09-04 10:25:061121semak imbas
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.
Jariskan ke tengah satu dan kanan/kiri elemen kotak flex lain dengan jidar automatik
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
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>
Jariskan satu dan kanan/kiri elemen kotak flex lain dengan elemen pseudo
Dalam contoh ini, kita akan menggunakan unsur pseudo dengan lebar yang sama dengan T. Gunakan ::sebelum meletakkannya di permulaan bekas.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Mari 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>
Jariskan satu lagi dan kanan/kiri elemen kotak flex yang lain dengan Tata Letak Grid
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!