hujung hadapan web
html tutorial
Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain
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.
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Reka letak objek C++ diselaraskan dengan memori untuk mengoptimumkan kecekapan penggunaan memori
Jun 05, 2024 pm 01:02 PM
Susun atur objek C++ dan penjajaran memori mengoptimumkan kecekapan penggunaan memori: Susun atur objek: ahli data disimpan dalam susunan pengisytiharan, mengoptimumkan penggunaan ruang. Penjajaran memori: Data diselaraskan dalam memori untuk meningkatkan kelajuan akses. Kata kunci alignas menentukan penjajaran tersuai, seperti struktur CacheLine yang dijajarkan 64 bait, untuk meningkatkan kecekapan akses talian cache.
Unit manakah yang sesuai untuk melaksanakan susun atur responsif?
Jan 27, 2024 am 09:39 AM
Apakah unit yang hendak dipilih untuk reka letak responsif? Dengan populariti peranti mudah alih dan tablet, semakin ramai orang menggunakan pelbagai peranti untuk menyemak imbas web. Untuk memastikan halaman web mempunyai kebolehbacaan yang baik dan pengalaman pengguna pada peranti yang berbeza, reka letak responsif secara beransur-ansur menjadi pertimbangan penting dalam reka bentuk dan pembangunan. Apabila melaksanakan susun atur responsif, memilih unit yang betul adalah sangat penting. Artikel ini akan menganalisis beberapa unit biasa untuk membantu pembaca memilih unit yang sesuai untuk melaksanakan reka letak responsif. Piksel (px): Piksel ialah unit panjang yang paling biasa dan mewakili a
Bagaimana untuk menyelaraskan lapisan dalam Photoshop
Apr 01, 2024 am 11:31 AM
1. Pertama, kita perlu membuka perisian Photoshop dan masukkan antara muka, dan penulis akan mengambil gambar seperti yang ditunjukkan di bawah sebagai contoh untuk menunjukkan penjajaran antara lapisan. 2. Jika kita ingin menjajarkan lapisan, pertama sekali kita perlu mencari bar lapisan di sudut kanan bawah antara muka. 3. Kemudian, jika lapisan tidak diraster atau dibuka kunci, kita perlu klik kanan lapisan untuk rasterisasi atau klik dua kali untuk membuka kuncinya. 4. Seterusnya, kita perlu tahan shift dan pilih lapisan yang perlu diselaraskan. 5. Akhir sekali, kita perlu mencari alat [Pilih] dalam bar alat, dan mencari alat Penjajaran di bar fungsi atas.
Petua pengoptimuman sifat teks CSS: fon, ketinggian baris dan penjajaran teks
Oct 22, 2023 am 08:15 AM
Petua pengoptimuman sifat teks CSS: fon, ketinggian baris dan penjajaran teks Dalam reka bentuk web, teks merupakan bahagian penting. Dengan mengoptimumkan sifat teks CSS, kami boleh meningkatkan kebolehbacaan dan pengalaman pengguna tapak web kami. Artikel ini akan berkongsi beberapa petua pengoptimuman, termasuk memilih fon yang betul, menetapkan ketinggian baris yang munasabah dan penjajaran teks, dan memberikan contoh kod khusus. 1. Pilih fon yang betul Memilih fon yang betul adalah penting untuk kebolehbacaan dan kesan visual halaman web. Berikut ialah beberapa faktor utama yang perlu dipertimbangkan: Keluarga fon: Pilih yang mempunyai kebaikan
Jajarkan item flex ke tengah bekas menggunakan CSS
Sep 19, 2023 pm 02:57 PM
Jajarkan item lentur ke tengah menggunakan sifat justify-content dengan nilai pusat. Contoh Anda boleh cuba menjalankan kod berikut untuk mencapai demonstrasi langsung nilai pusat <!DOCTYPEhtml><html> <head> <style> .mycontainer{ &nbs
Apr 09, 2024 pm 01:39 PM
Untuk menjajarkan teks HTML, anda boleh menggunakan atribut penjajaran teks (kiri, tengah, kanan, justify), CSSFlexbox (justify-content) dan CSSGrid (grid-template-columns, justify-content). Pilihan khusus bergantung pada keperluan anda, seperti tajuk penjajaran tengah (penjajaran teks atau justify-kandungan), penjajaran perenggan teks pada kedua-dua hujung (justify), dan galeri imej yang fleksibel dan responsif (justify-content melaraskan penjajaran secara dinamik). Amalan terbaik menekankan semantik, memilih mengikut keperluan dan mempertimbangkan keperluan khusus reka bentuk (berpusat
Dalam HTML, tengah satu elemen dan kanan/kiri jajarkan elemen flexbox lain
Sep 04, 2023 am 10:25 AM
Katakan kita mempunyai P,Q,R,S,Talignedinthecenterofawebpage−PQRST Kita mahu perkara di atas kekal sama kecuali yang paling kanan iaitu T digerakkan ke kanan seperti ini−PQRST Sekarang mari kita lihat beberapa contoh untuk melaksanakan apa yang kita lihat di atas. Terjemahan bahasa Cina bagi Centeroneandright/leftalignotherflexboxelementwithautomarginsContohnya ialah: Contoh Dengan menggunakan jidar automatik dan item flex tidak kelihatan baharu, reka letak di atas boleh dicapai pada halaman web −<html>&am
Pilih kaedah yang paling sesuai dengan jenis reka letak responsif anda
Feb 18, 2024 pm 04:19 PM
Cara memilih jenis reka letak responsif yang sesuai memerlukan contoh kod khusus Dengan populariti peranti mudah alih dan perkembangan pesat Internet, reka letak responsif telah menjadi pertimbangan penting dalam reka bentuk web. Reka letak responsif secara automatik boleh melaraskan reka letak dan paparan kandungan mengikut saiz skrin dan jenis peranti yang berbeza, memberikan pengalaman pengguna yang lebih baik. Walau bagaimanapun, memilih jenis susun atur responsif yang betul bukanlah tugas yang mudah. Artikel ini akan memperkenalkan beberapa jenis reka letak responsif biasa dan memberikan contoh kod yang sepadan. Saya harap ia dapat membantu pembaca memilih yang sesuai dengan keperluan mereka.
