<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;">
<テンプレート>
<div class="container flex p-4 flex-col h-screen overflow-hidden bg-slate-200">
<header class="bg-slate-200 pb-2""
<ナビ>
<ul class="flex justify-end gap-5">
<NuxtLink to="スキル" class="rounded-lg border-black border-solid border-2
p-3」
<li>主なスキルと興味
</li>
</NuxtLink>
<NuxtLink to="教育" class="rounded-lg border-black border-solid
ボーダー-2 p-3''>
<li>教育</li>
</NuxtLink>
<NuxtLink to=" experience" class="rounded-lg border-black border-solid
ボーダー-2 p-3''>
<li>経験</li>
</NuxtLink>
<NuxtLink to="about" class="rounded-lg border-black border-solid
ボーダー-2 p-3''>
<li>私について少し</li>
</NuxtLink>
</ul>
</ナビ>
</ヘッダー>
</div>
<スロット/>
</div>
</テンプレート>
</pre></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tailwind のコンテナー クラスは、水平方向のパディングや自己センタリングを自動的に適用しません。 mx-auto クラス (margin-left と margin-right を auto に設定) を最初の div に追加すると、問題は解決します。