Svelte构建Menu组件时Todo文本无法左对齐的技术求助

嘿，我来帮你搞定这个Todo文本左对齐的问题！先看看你代码里的问题所在：

问题分析 #

你写的CSS里有个明显的小错误：text-align: -50px —— 这个属性根本不接受像素值哦！text-align的合法取值是left、right、center这类对齐方向，用像素值完全起不到作用，反而会让样式失效，这就是Todo文本没法左对齐的核心原因。另外你的Grid布局写法也有点不规范，可能会影响整体布局效果。

解决方案 #

我给你修正一下代码，保证Todo文本能乖乖左对齐：

<script>
  import Menu from './Menu.svelte'
  export let name;
</script>

<h1>Todo App</h1>
<p>fesfse</p>

<!-- 给容器加个类名，避免全局div样式冲突 -->
<div class="container">
  <!-- 这里放你的Menu组件和Todo内容 -->
  <Menu />
  <div class="content">
    <!-- Todo文本内容放在这里 -->
    <p>这是一条Todo项，现在可以左对齐啦！</p>
  </div>
</div>

<style>
  .container {
    /* 去掉错误的text-align，换成正确的left对齐 */
    text-align: left;
    display: grid;
    /* 规范Grid布局写法，明确列宽和区域 */
    grid-template-areas: "nav content";
    grid-template-columns: auto 1fr; /* 导航栏自适应宽度，内容区占剩余空间 */
    align-items: start;
  }

  .content {
    grid-area: content;
    /* 如果需要调整内容的左右间距，可以用margin/padding */
    margin-left: 1rem;
  }
</style>

关键修改点 #

• 把错误的text-align: -50px替换成text-align: left，这才是让文本左对齐的正确方式
• 给外层容器加了类名.container，避免全局div样式污染其他元素
• 规范了Grid布局的写法，明确了列宽和区域分配，让布局更稳定
• 如果需要调整文本的左右位置，别用text-align，改用margin-left或padding-left来控制

这样修改之后，你的Todo文本应该就能正常左对齐啦！

内容的提问来源于stack exchange，提问作者Mr.mr