如何在居中页面中左对齐jQuery待办事项列表的新增项？

嘿，这个问题其实很好搞定～你现在的问题是给body加了text-align: center，这个样式会被所有行内/行内块元素继承，所以新增的列表项也跟着居中了。咱们完全不用改JavaScript代码，用CSS就能优雅解决，当然也给你准备了JS方案（不过更推荐CSS哦）：

方法一：给列表容器设置反向对齐（最推荐） #

找到你的列表容器（比如是<ul class="todo-list">或者<div class="list">），在CSS里给它加这几行：

.todo-list {
  text-align: left; /* 覆盖body的居中，让内部元素左对齐 */
  max-width: 600px; /* 可选：限制列表宽度，避免太宽影响阅读 */
  margin: 0 auto; /* 让容器本身依然在页面水平居中 */
}

这样一来，整个列表容器还是居中在页面里，但里面的每一项都会左对齐，完美兼顾页面整体布局和列表的阅读体验～

方法二：直接给列表项设置样式 #

如果不想调整容器，也可以直接给单个列表项加样式：

.todo-list li {
  text-align: left;
  display: block; /* 确保列表项是块级元素，对齐生效 */
  max-width: 600px;
  margin: 0 auto; /* 让每个列表项也保持在容器内居中，内容左对齐 */
}

方法三：通过JavaScript动态设置样式（不推荐，样式尽量交给CSS） #

如果你一定要在JS里处理，那可以在插入列表项的时候给它加样式或者类：

$(function() {
  $('.button').click(function() {
    let toAdd = $('input[name=checkListItem]').val();
    // 直接加内联样式（不推荐，不利于维护）
    $('.list').append(`<li style="text-align: left; display: block;">${toAdd}</li>`);
    // 或者加预定义类（更规范）
    // $('.list').append(`<li class="todo-item">${toAdd}</li>`);
  });
});

然后在CSS里定义这个类：

.todo-item {
  text-align: left;
  display: block;
  max-width: 600px;
  margin: 0 auto;
}

总结一下，优先用方法一，这样结构和样式分离，后续改起来也方便。核心就是利用CSS的继承特性，在列表的父容器上覆盖text-align的值就好啦～

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