css - 占用填充元素的剩余空间的问题

Question

我正在尝试创建一个包含文本和按钮的元素，该按钮将元素作为 todo 项目的一部分删除。

我遇到了一个问题，我无法将文本居中，也无法填充元素内剩余的高度和右侧的剩余空间，如图所示。

我正在使用 ReactJS 和 styled-components 库。

这是样式组件（我认为相关的块是：StyledAddButton 和 StyledP）

import styled from "styled-components";

export const StyledList = styled.div`
  font-family: "Open Sans";
  justify-content: center;
  text-align: center;
  align-items: center;
  max-width: 40%;
  margin: 8rem auto;
  box-shadow: red;
  min-height: 60vh;
  -webkit-box-shadow: 0px 0px 20px 5px rgba(176, 203, 235, 1);
  -moz-box-shadow: 0px 0px 20px 5px rgba(176, 203, 235, 1);
  box-shadow: 0px 0px 20px 5px rgba(176, 203, 235, 1);
  border-radius: 107px 107px 107px 107px;
  -moz-border-radius: 107px 107px 107px 107px;
  -webkit-border-radius: 107px 107px 107px 107px;
  border: 7px solid #abbcd9;
  text-align: center;
  height: 100%;
`;

export const StyledButtonList = styled.div`
  display: flex;
  justify-content: center;
`;

export const StyledXButton = styled.button`
  color: #fff;
  padding: 10px 30px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #ef3f5a;
  width: 100%;
  height: 100%;
`;

export const StyledButtonInput = styled.input`
  border: 0;
  border-bottom: 1px solid gray;
  text-align: center;
  padding: 7px 0;
`;

export const StyledTodoWindow = styled.div`
  margin: 8rem auto;
`;

export const StyledTodo = styled.div`
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: auto;
  height: 100%;
`;

export const StyledAddButton = styled.button`
  background-color: #abbcd9;
  border: none;
  font-family: "Open Sans";
  color: white;
  font-size: 16px;
  background-color: white;
  color: black;
`;

export const StyledP = styled.p`
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.3);
  padding: 10px;
  height: 100%;
`;

export const StyledH1 = styled.h1`
  font-family: "Open Sans";
`;

这是 app.js 的返回部分：

return (
    <StyledList>
      <GlobalFonts />
      <StyledTodoWindow>
        <h1>What are the plans for today?</h1>
        <form>
          <StyledButtonInput
            type="text"
            placeholder="Add Todo"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          ></StyledButtonInput>
          <StyledAddButton
            onClick={(e) => {
              e.preventDefault();
              setTodos([
                ...todos,
                {
                  name: input,
                  id: uuidv4(),
                },
              ]);
            }}
          >
            Add
          </StyledAddButton>
          {todos.length > 0 ? (
            <StyledH1>Your todos:</StyledH1>
          ) : (
            <h2>Nothing?! :)</h2>
          )}
        </form>

        <StyledTodo>
          {todos.map((todo) => {
            return (
              <StyledP>
                {todo.name}{" "}
                <StyledButtonList>
                  <StyledXButton onClick={() => deleteTask(todo.id)}>
                    x
                  </StyledXButton>{" "}
                </StyledButtonList>
              </StyledP>
            );
          })}
        </StyledTodo>
        {todos.length > 0 ? (
          <button onClick={() => clearAll()}> Remove all </button>
        ) : (
          ""
        )}
      </StyledTodoWindow>
    </StyledList>
  );
};

标签： cssreactjsflexboxstyled-components