页面未全屏时出现无法解释的右侧边距 - 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 将解决该问题。