javascript - css flex 和输入框的问题

Question

我有 2 个并排的列表。这些排列得很好，但是当我添加输入框时，它会不同步。知道为什么会这样吗？我的代码如下。还有截图。

请查找codesandbox here too .

const Wrapper = styled.article`
    width: 240px;
    background: #fff;
    text-align: center;
    padding: 12px 0 8px 0;
`;

const Header = styled.p`
    font-size: 15px;
`;

const Options = styled.div`
    display: flex;
    margin-bottom: 5px;
`;

const Option = styled.div`
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
`;

const FirstOption = styled(Option)`
    justify-content: flex-end;
`;

const Text = styled.p`
    font-size: 15px;
    margin: 4px 0;
`;

const Left = styled.div`
    flex: 1;
    margin-right: 5px;
`;

const Right = styled.div`
    flex: 1;
    margin-left: 5px;
`;


<Wrapper>
     <Header>Choose your teams</Header>
     <Options>
        <Left>
            <input type="text" />
            {teams.map(currency => (
                <FirstOption>
                   <Text>{team}</Text>
                </FirstOption>
             ))}
        </Left>

        <Right>
            <input type="text" />
            {teams.map(team => (
                <Option>
                    <Text>{team}</Text>
                </Option>
            ))}
        </Right>
     </Options>
</Wrapper>

这是它的样子

它应该是这样的，但是带有输入框。

Answer 1

你可以通过添加来做到这一点

const Input = styled.input`
  width: 100%;
  box-sizing: border-box;
`;

和改变

<input type="text" /> to <Input type="text" />

我在这里解决这个问题 https://codesandbox.io/s/xv93wl893z

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const Wrapper = styled.article`
  width: 200px;
  background: grey;
  text-align: center;
  padding: 12px 0 8px 0;
`;

const Header = styled.p`
  font-size: 15px;
`;

const Options = styled.div`
  display: flex;
  margin-bottom: 5px;
`;

const Option = styled.div`
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d8d8d8;
`;

const FirstOption = styled(Option)`
  justify-content: flex-end;
`;

const Text = styled.p`
  font-size: 15px;
  margin: 4px 0;
`;

const Left = styled.div`
  flex: 1;
  margin-right: 5px;
`;

const Right = styled.div`
  flex: 1;
  margin-left: 5px;
`;

const Input = styled.input`
  width: 100%;
  box-sizing: border-box;
`;

const teams = ["Liverpool", "Chelsea", "Fulham"];

function App() {
  return (
    <Wrapper>
      <Header>Choose your team</Header>
      <Options>
        <Left>
          <Input type="text" />
          {teams.map(team => (
            <FirstOption key={team}>
              <Text>{team}</Text>
            </FirstOption>
          ))}
        </Left>

        <Right>
          <Input type="text" />
          {teams.map(team => (
            <Option>
              <Text>{team}</Text>
            </Option>
          ))}
        </Right>
      </Options>
    </Wrapper>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);