頁面未全螢幕時出現無法解釋的右側邊距 - Nuxt/Tailwinds
P粉710478990
2023-09-01 00:05:46
<p>我正在嘗試使用 Nuxt、Vue3 和 TailwindCSS 製作一個簡單的簡歷頁面。當我的瀏覽器全螢幕時，一切看起來都很好，而且一切都很好。但是，如果我看到全螢幕之外的任何內容，則應用程式主體部分的頁面右側會無緣無故地留出空白。 （請忽略可怕的設計，它仍在進行中）</p>
<p>如下所示，元素的右側有一個邊距，但不應該有，而且它甚至沒有顯示在計算的佈局中。我沒有添加自訂 CSS，所以我只使用預設的 Tailwind 提供的類，據我所知，不應該有右側邊距。 </p>
<p>這是父元素，正如您所看到的，它沒有會影響子元素的填充或邊距。
</p>
<p>這是我的<code>default.vue</code>，其中插入了「content」元素（在<code><slot /></code> 標記中）</ 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">
<header class="bg-slate-200 pb-2">
<nav>
<ul class="flex justify-end gap-5">
<NuxtLink to="skills" class="rounded-lg border-black border-solid border-2
p-3">
<li>Key Skills & Interests
</li>
</NuxtLink>
<NuxtLink to="education" class="rounded-lg border-black border-solid
border-2 p-3">
<li>Education</li>
</NuxtLink>
<NuxtLink to="experience" class="rounded-lg border-black border-solid
border-2 p-3">
<li>Experience</li>
</NuxtLink>
<NuxtLink to="about" class="rounded-lg border-black border-solid
border-2 p-3">
<li>A Little Bit About Me</li>
</NuxtLink>
</ul>
</nav>
</header>
</div>
<插槽>>
</範本>
</pre></p>
順風中的容器類別不會自動套用任何水平填充或自居中。將 mx-auto 類別（將 margin-left 和 margin-right 設定為 auto）新增至第一個 div 將解決該問題。