Question

我正在尝试将下拉菜单水平对齐，但现在将其垂直对齐。
所以我以w3学校的flexbox为例，进行了更改。
在演示代码中，它的工作正常，您可以在水平线上看到1,2,3,4。
好像我在slect标签中包含了这些类一样，它的中断。 -我调试了一下，发现它们已经将flexgrow赋予了根类。
即使我删除了它也不起作用。
您能告诉我如何修复它，以便将来我自己修复。
在下面提供我的相关代码段和snadbox。
我所有的代码都在AutoCompleteComponent.js中

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>

如何将下拉菜单从垂直线对齐到水平线？

1 个答案: