Javascript 如何将按钮置于物料界面列表的末尾，将复选框置于列表的开头？

我的css不是很好，我面临很多困难。。。我正试图作出反应，以应用程序的帮助下，材料界面。。。我的问题是我想在物料ui列表中显示todo项，其中列表中的第一项是复选框2）第二个todo文本3）第三个编辑和删除按钮

呈现mui列表的代码

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { todoDeleted, todoUpdated, todoCompleted } from '../Slices/TodoSlice';
import { Button, Checkbox, List, ListItem, ListItemSecondaryAction, ListItemText, makeStyles } from '@material-ui/core'

const useStyles = makeStyles({
  listRoot: {
    display: 'flex',
    alignItems: 'center',
    backgroundColor: '#fce4ec',
    borderWidth: "1px",
    borderColor: "#aaaaaa",
    borderStyle: "solid",
    borderRadius: "20px",
    height: "35px",
    margin: "5px 5px"
  },
  item: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    width: "500px"
  }
})

export default function TodoItem({ todo, i }) {
  const classes = useStyles()
  const dispatch = useDispatch();
  const [edit, setEdit] = useState(false);
  const [text, setText] = useState(todo.text);

  const handleUpdate = () => {
    dispatch(
      todoUpdated({
        id: todo.id,
        text,
      })
    );

    if (edit) {
      setText(todo.text);
    }
    setEdit(!edit);
  };

  return (
      <div className={classes.listRoot}>
        <List>
          <ListItem className={classes.item}>
        
        <ListItemText>
          {todo.done ? (
            <p>
              <del>{todo.text}</del>
            </p>
          ) : (
            <h4>
              {edit ? (
                <input
                  type="text"
                  placeholder={text}
                  value={text}
                  onChange={(e) => setText(e.target.value)}
                />
              ) : (
                todo.text
              )}
            </h4>
          )}
        </ListItemText>
        <ListItemSecondaryAction>
        <Checkbox
          value={todo.id}
          onChange={(e) => dispatch(todoCompleted(+e.target.value))}
          defaultChecked={todo.done}
        />
        <button
          variant="contained" color="primary" edge='end'
          onClick={() => handleUpdate()}
          disabled={todo.done}
        >
          {edit ? 'Update' : 'Edit'}
        </button>
        <button
          variant="contained" color="primary"
          onClick={() => dispatch(todoDeleted(todo.id))}
        >
          Delete
        </button>
        </ListItemSecondaryAction>
        </ListItem>
        </List>
      </div>
  );
}

import React，{useState}来自“React”；
从'react redux'导入{useDispatch}；
从“../Slices/TodoSlice”导入{todoDeleted、todoUpdated、todoCompleted}；
从“@material ui/core”导入{按钮、复选框、列表、ListItem、ListItemSecondaryAction、ListItemText、makeStyles}
const useStyles=makeStyles({
listRoot：{
显示：“flex”，
对齐项目：“居中”，
背景颜色：“#fce4ec”，
边框宽度：“1px”，
边框颜色：“AAAAA”，
边框样式：“实心”，
边界半径：“20px”，
高度：“35px”，
边距：“5px 5px”
},
项目：{
显示：“flex”，
flexDirection:'列'，
为内容辩护：“中心”，
宽度：“500px”
}
})
导出默认函数TodoItem（{todo，i}）{
常量类=useStyles（）
const dispatch=usedpatch（）；
const[edit，setEdit]=useState（false）；
const[text，setText]=useState（todo.text）；
常量handleUpdate=（）=>{
派遣(
成双({
id:todo.id，
文本，
})
);
如果（编辑）{
setText（todo.text）；
}
setEdit（！edit）；
};
返回(
{todo.完成了吗(

{todo.text}

) : (
{编辑(
setText（e.target.value）}
/>
) : (
todo.text
)}
)}
分派（todoCompleted（+e.target.value））}
defaultChecked={todo.done}
/>
handleUpdate（）}
disabled={todo.done}
>
{编辑？'Update'：'edit'}
调度（todoDeleted（todo.id））}
>
删除
);
}

---

我想要第一个项目作为复选框，第二个todo文本和第三个按钮，请指导我

如果您要添加css文件，可能会有所帮助-因此我们可以检查当前状态

但无论如何，看看CSS网格布局。这可能是适合你的。 使用CSS网格布局，您可以为元素指定网格位置，例如复选框1。 然后，您可以使用

display:grid

选择首先显示id 1，依此类推。

这是您的代码，这是我修改的主要代码：

TodoList.js：

import { makeStyles, List } from "@material-ui/core";
import React from "react";
import { useSelector } from "react-redux";
import TodoItem from "./TodoItem";

const useStyles = makeStyles({
  rootDiv: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    marginLeft: "10px",
    marginRight: "10px"
  },
  p: {
    fontSize: "30px",
    fontweight: "bolder"
  }
});

export default function TodoList() {
  const classes = useStyles();
  const todos = useSelector((state) => state.TodoReducer);
  const filter = useSelector((state) => state.viewFilterReducer);

  const getVisibleTodos = (todos, filter) => {
    switch (filter) {
      case "SHOW_ALL":
        return todos;
      case "SHOW_ACTIVE":
        return todos.filter((todo) => !todo.done);
      case "SHOW_COMPLETED":
        return todos.filter((todo) => todo.done);
      default:
        return todos;
    }
  };
  const visibleTodos = getVisibleTodos(todos, filter);

  return (
    <div className={classes.rootDiv}>
      {visibleTodos?.length === 0 ? (
        <p className={classes.p}>No Todo Item Here</p>
      ) : (
        <List>
          {/*
            I moved the list here, because you need to create only one list 
            and loop over you items  
          */}
          {visibleTodos.map((todo, i) => (
            <TodoItem key={i} todo={todo} />
          ))}
        </List>
      )}
    </div>
  );
}

然后：

<ListItem className={[classes.item, classes.itemSpacing]}>

以及：

---

但请务必小心，如果项目文本太长，它将中断，1）因为您为项目设置了硬编码的高度，2）因为

ListItemSecondaryAction

处于

位置：绝对
您可以通过代码一点一点地显示它吗。请注意，它已经用flexbox设计好了，在这里添加网格是没有意义的。他的css中有些东西破坏了布局。没有flexbox listitems，在list@sultan是的，但这很可能是因为您的代码破坏了默认的flex行为。在stackblitz或codepen上添加一个复制，这样我们就可以在五分钟内处理itok。请提供一个复制，这样我们就可以处理它。
const useStyles = makeStyles({
  item: {
    // ...
  },
  itemSpacing: { padding: 0 25% }
});

<ListItem className={[classes.item, classes.itemSpacing]}>


<ListItemSecondaryAction className={classes.itemSpacing}>