React/CSS：如何将按钮向左移动，使其匹配搜索栏的开头

我希望将按钮与搜索栏的起始位置对齐：。我怎样才能让他们一起开始

但是，即使在将样式添加到按钮后，它仍保持在相同的位置：

  render() {
    const { suggestions, value, filteredProjects, isANDOn, text } = this.state;
    const inputProps = {
      placeholder: "Search",
      value,
      onChange: this.onChange
    };

    return (
      <div>
        <PageWrapper headerBar={true} search={true} sideMenu={true}>
          <div
            style={{
              width: "100%",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <h1 className="mt0 mb1">Archive</h1>
            <button
              style={{ float: "left" }} //the button
              onClick={this.handleClick}
              label={"Click to toggle!"}
            >
              {text}
            </button>
        <Autosuggest
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
          getSuggestionValue={this.getSuggestionValue}
          renderSuggestion={this.renderSuggestion}
          inputProps={inputProps}
        />

render（）{
const{suggestions，value，filteredProjects，isANDOn，text}=this.state；
常量输入属性={
占位符：“搜索”，
价值
onChange:this.onChange
};
返回(
档案文件
{text}

无需使用

浮动

，只需将按钮和输入包装在一个带有

显示的div中：“flex”

，就可以解决问题

const-App=（）=>(
档案文件
及
);
常量样式={
家长：{
宽度：“100%”，
显示：“flex”，
flexDirection:“列”，
对齐项目：“中心”，
辩护内容：“中心”，
},
搜索部分：{
显示：“flex”
}
}
ReactDOM.render（，document.getElementById（“react”）；

你也可以给我们看一下你的搜索栏吗？我会给你举个例子。我已经把它添加到我的代码中，但它是从个人用户界面上添加的，所以我认为你不能在例子中使用它……嗨，感谢你的回答。不过我的意思是它应该从搜索栏所在的位置开始，就像在搜索栏顶部一样，但从同一位置开始。你的意思是

p位置：搜索栏顶部按钮的绝对值

？