如何让<li>元素左对齐至上方文本框左侧？

你的.container设置了align-items: center，这会让容器内所有子元素（包括<form>和<ul>）都水平居中对齐。但<form>的宽度是内部输入框+提交按钮的总宽度，而<ul>的宽度仅为列表项内容的宽度，两者居中后，列表项自然会比输入框偏右，导致你看到的不对齐问题。另外，HTML里用了非标准的<container>标签，这可能会导致浏览器渲染异常，应该换成标准的<div>标签。

修改CSS和HTML如下：

修改后的CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'fira sans', sans-serif;
}

body {
  color: white;
  background-color: cornflowerblue;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 移除align-items:center，改用margin让容器整体水平居中 */
  margin: 0 auto;
  max-width: 600px; /* 限制最大宽度，优化大屏显示 */
  height: 100vh;
  padding: 0 1rem; /* 避免内容贴边 */
}

#myInput {
  border-radius: 1rem;
  padding: 1rem;
  font-size: 1.25rem;
  margin-right: 1rem;
  background-color: lightgray;
  width: calc(100% - 80px); /* 让输入框自适应宽度，预留提交按钮空间 */
}

#myInput::placeholder {
  color: grey;
}

#list {
  padding-left: 0;
  list-style-type: none;
  margin-left: 0;
  width: 100%; /* 让列表宽度和表单一致，保证对齐 */
}

#list li {
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
  background-color: rgba(255,255,255,0.1);
  border-radius: 0.5rem;
}

修改后的HTML代码 #

<div class="container">
  <h1>To Do 2023</h1>
  <form method="get" id="myForm" onsubmit="event.preventDefault();">
    <input type="text" id="myInput" placeholder="Enter Text...">
    <input type="submit">
  </form>
  <ul id="list">
    <li>hi</li>
    <li>my</li>
    <li>friend</li>
  </ul>
</div>

1. 替换非标准<container>为<div>：浏览器无法识别自定义的<container>标签，会影响布局计算，换成标准<div>才能保证渲染正常。
2. 调整容器对齐方式：移除align-items: center，用margin: 0 auto让整个容器在页面水平居中，内部元素自动左对齐，解决列表和输入框的错位问题。
3. 统一元素宽度：给#myInput设置自适应宽度，给#list设置width: 100%，确保表单和列表的宽度一致，让列表项和输入框左侧完全对齐。
4. 优化样式细节：给列表项添加背景和内边距，提升视觉体验，你可以根据需求调整这些样式。

内容的提问来源于stack exchange，提问作者Mike