Jidar kanan yang tidak dapat dijelaskan apabila halaman bukan skrin penuh - Nuxt/Tailwinds
P粉710478990
P粉710478990 2023-09-01 00:05:46
0
1
523
<p>Saya cuba membuat halaman resume ringkas menggunakan Nuxt, Vue3 dan TailwindCSS. Apabila penyemak imbas saya skrin penuh semuanya kelihatan baik dan semuanya berfungsi dengan baik. Walau bagaimanapun, jika saya melihat apa-apa selain daripada skrin penuh, bahagian kanan halaman di bahagian utama apl kosong tanpa sebab. (sila abaikan reka bentuk yang mengerikan, ia masih dalam proses)</p> <p>Seperti yang anda boleh lihat di bawah, elemen mempunyai jidar di sebelah kanan, tetapi ia tidak sepatutnya, malah ia tidak muncul dalam reka letak yang dikira. Saya tidak menambah CSS tersuai, jadi saya hanya menggunakan kelas yang disediakan oleh Tailwind lalai, yang setahu saya tidak sepatutnya mempunyai margin yang betul. </p> <p>Ini ialah elemen induk, dan seperti yang anda lihat, ia tidak mempunyai pelapik atau jidar yang akan menjejaskan elemen kanak-kanak. </p> <p>Ini ialah <code>default.vue</code> dengan elemen "kandungan" dimasukkan (dalam <code><slot /></code> tag)</ p> <pre class="brush:html;toolbar:false;"> <template> <div class="container flex p-4 flex-col h-screen overflow-hidden bg-slate-200"> <div class="pb-2 bg-gradient-to-r from-red-500 via-green-500 to-purple-500"> <kelas pengepala="bg-slate-200 pb-2"> <nav> <ul class="flex justify-end gap-5"> <NuxtLink to="skills"class="bulat-lg sempadan-hitam-sempadan pepejal-2 p-3"> <li>Kemahiran Utama & </li> </NuxtLink> <NuxtLink to="education" class="bulat-lg sempadan-hitam-pepejal sempadan-2 p-3"> <li>Pendidikan</li> </NuxtLink> <NuxtLink to="experience"class="bulat-lg sempadan-hitam-pepejal sempadan-2 p-3"> <li>Pengalaman</li> </NuxtLink> <NuxtLink to="about"class="bulat-lg sempadan-hitam-pepejal sempadan-2 p-3"> <li>Sedikit Tentang Saya</li> </NuxtLink> </ul> </nav> </header> </div> <slot /> </div> </template> </pra></p>
P粉710478990
P粉710478990

membalas semua(1)
P粉854119263

Kelas kontena di Tailwind tidak menggunakan sebarang pelapik mendatar atau memusatkan diri secara automatik. Menambah kelas mx-auto (menetapkan margin-kiri dan margin-kanan kepada auto) pada div pertama akan menyelesaikan masalah.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!