如何將下拉菜單從垂直線對齊到水平線？

Question

• 我試圖將下拉菜單的水平線對齊，但現在將其垂直線對齊。
• 所以我以w3學校的flexbox為例，進行了更改。
• 在演示代碼中，它的工作正常，您可以在水平線上看到1,2,3,4。
• 好像我在slect標簽中包括了那些類一樣，它的中斷。 -我進行了調試，發現它們已經將flexgrow賦予了根類。
• 即使我刪除它不起作用。
• 您能告訴我如何修復它，以便將來自己修復。
• 在下面提供我的相關代碼段和snadbox。
• 我所有的代碼都在AutoCompleteComponent.js中

https://codesandbox.io/s/4x9lw9qrmx

queryBuilderContainer: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "DodgerBlue ",
    border: "1px solid red "
    // width: 100,

    // display: flex;
    // flex-wrap: wrap;
    // background-color: DodgerBlue;
  },
  queryBuilderContainerItem: {
    border: "1px solid black ",
    backgroundColor: "red ",
    width: 100,
    margin: 10,
    textAlign: "center",
    //lineHeight: 75,
    fontSize: 30
  },
  root: {
    flexGrow: 1,
    height: 250
  },
  input: {
    display: "flex",
    padding: 0
  },
  valueContainer: {
    display: "flex",
    flexWrap: "wrap",
    flex: 1,
    alignItems: "center",
    overflow: "hidden"
  },

nossr0901

  <NoSsr className={classes.queryBuilderContainer}>
            <Select
              className={classes.queryBuilderContainerItem}
              classes={classes}
              styles={selectStyles}
              options={this.state.suggestions}
              components={components}
              value={this.state.single}
              onChange={this.handleChange("network")}
              placeholder="Search a to do"
            />
            <Select
              className={classes.queryBuilderContainerItem}
              classes={classes}
              styles={selectStyles}
              options={this.state.nameSuggestions}
              components={components}
              value={this.state.names}
              onChange={this.handleChange("location")}
              placeholder="Search name"
            />
            <div className={classes.divider} />
            <Select
              className={classes.queryBuilderContainerItem}
              classes={classes}
              styles={selectStyles}
              options={this.state.operatorSuggestions}
              components={components}
              value={this.state.operator}
              onChange={this.handleChange("operator")}
              placeholder="Search name"
            />
            <div className={classes.divider} />
            <button onClick={e => this.props.removeSeleted(this.props.index)}>
              Remove
            </button>
          </NoSsr>

Answer 1

您遇到的問題是NoSsr組件的div父級 。
該div父級必須使用className： queryBuilderContainer 。
例如，那么您將不需要將類放到NoSsr 。

請參見下面的代碼：

<div className={classes.queryBuilderContainer}>
      <NoSsr>
        <Select className={classes.queryBuilderContainerItem}...>
        <Select className={classes.queryBuilderContainerItem}...>
        ...
      </NoSsr>
 </div>