React-select 不遵循 flexbox 对齐

Question

我正在尝试制作我的导航栏，我想在一行中同时显示这两个 react-selects，所以我这样做了

vanilla select 一切正常，但添加 react-select 破坏了我的样式

Navbar.js

import React, { useState } from "react";
import classes from "./Navbar.module.css";
import { useDispatch } from "react-redux";
import { selectAction } from "../../../store/actions/actions";
import Logo from "../../../images/BB_S5_excl_namelab_c.jpg";

import Select from 'react-select';

const CharacterOptions = [
    { value: '-----------', label: '-----------' },
    { value: 'Get character by id', label: 'Get character by id' },
    { value: 'Get character by category', label: 'Get character by category' },
    { value: 'Get random character', label: 'Get random character' },
    { value: 'Search character by name', label: 'Search character by name' },
  ];

  const QuoteOptions = [
    { value: '-----------', label: '-----------' },
    { value: 'Get quote by id', label: 'Get quote by id' },
    { value: 'Get quotes by series', label: 'Get quotes by series' },
    { value: 'Get a random quote', label: 'Get a random quote' },
    { value: 'Get quote by author', label: 'Get quote by author' },
    { value: 'Get a random quote by author', label: 'Get a random quote by author' },
  ];

const Navbar = (props) => {
  const dispatch = useDispatch();
  const [selectedCharacter, setSelectedCharacter] = useState(false);
  const [selectedQuote, setSelectedQuote] = useState(false);

  const dropDownCharacterSelected = (value) => {
    if (value !== "-----------") {
      setSelectedCharacter(true);
      dispatch(selectAction(value.value));
    } else {
      dropDownCharacterDeSelected(value.value);
      dispatch(selectAction(null));
    }
  };

  const dropDownCharacterDeSelected = () => {
    setSelectedCharacter(false);
  };

  const dropDownQuoteSelected = (value) => {
    if (value !== "-----------") {
      setSelectedQuote(true);
      dispatch(selectAction(value.value));
    } else {
      dropDownQuoteDeSelected(value.value);
      dispatch(selectAction(null));
    }
  };

  const dropDownQuoteDeSelected = () => {
    setSelectedQuote(false);
  };

  return (
    <nav className={classes.Navbar}>
      <img src={Logo} alt="Logo" width="100" height="60" />
      <div>
        <ul>
          <li>
            <label>Characters</label>
            <Select
              disabled={selectedQuote}
              onChange={dropDownCharacterSelected}
              options={CharacterOptions}
            />
          </li>
          <li>
            <label>Quotes</label>
            <Select
              disabled={selectedCharacter}
              onChange={dropDownQuoteSelected}
              options={QuoteOptions}
            />
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

Navbar.module.css

.Navbar{
    display: flex;
    height: 52px;
    box-sizing: content-box;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    padding: 10px;
    justify-content: center;
    align-items: center;
}

.Navbar div ul {
    display: flex;
}

.Navbar ul li {
    display: flex;
    list-style: none;
}

.Navbar label {
    width: 100px;
    border-radius:8px;
    margin:10px;
    background-color: lightgrey;
    color:darkgreen;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
}

编辑

无法增加 react-select

的宽度

这是我的CodesandboxURL供大家参考

https://codesandbox.io/s/youthful-gauss-r1d8o

Answer 1

添加显示：flex，将在同一行显示两个组件：

.Navbar div ul {
    ...
    display: flex;
    ...
}

Answer 2

您可以通过使用 flexbox 将项目排成一行来实现：

.Navbar div ul {
  width: 100%;
  display: flex; /* use flexbox to align the inputs on same row */
}

.Navbar ul li {
  display: flex; /* use flexbox to align the labels on same row than the inputs */
  align-items: center; /* align the items vertically */
  list-style: none;
}

.Navbar ul li input {
  min-width: 100px; /* specify react-select component's width */
}

React-select 不遵循 flexbox 对齐

React-select not following flexbox alignment

css

reactjs

react-select