Jidar kanan yang tidak dapat dijelaskan apabila halaman bukan skrin penuh - Nuxt/Tailwinds
P粉710478990
2023-09-01 00:05:46
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.