Tailwind CSS实现右侧带按钮的搜索栏布局问题求助

我尝试实现一个右侧带有按钮的搜索栏，尽管已设置flex布局并添加justify-center类，甚至改为row布局，搜索栏和按钮仍未横向排列。以下是我的代码，请问问题出在哪里？如何解决？

原代码 #

return (
  <div className="p-2">
    <div className="text-left pl-4 pb-4 font-bold text-3xl">
      <h2>Detail SKU</h2>
    </div>
    <div className="p-2 justify-center mt-4 flex">
      <form
        onSubmit={(e) => {
          e.preventDefault();
        }}
      >
        <Autocomplete
          style={{ width: "100%" }}
          id="grouped-demo"
          options={options.sort(
            (a, b, index) => -b.firstLetter.localeCompare(a.firstLetter)
          )}
          groupBy={(option) => option.firstLetter}
          getOptionLabel={(option) => option.title}
          sx={{ width: 300 }}
          renderInput={(params) => {
            params.inputProps.onKeyDown = handleKeyDown;
            return <TextField {...params} label="Search SKU" />;
          }}
          renderGroup={(params) => (
            <li key={params.key}>
              <GroupHeader>{params.group}</GroupHeader>
              <GroupItems>{params.children}</GroupItems>
            </li>
          )}
        />
        <Button variant="contained">Search</Button>
      </form>
    </div>

    <Box sx={{ width: "100%", typography: "body1" }}>
      <TabContext value={value} index={0} classes={{ root: useStyles.tab }}>
        <Box sx={{ borderColor: "divider", p: 0 }}>
          <TabList
            index={0}
            classes={{ root: useStyles.tab }}
            onChange={handleChange}
            variant="scrollable"
            scrollButtons="auto"
            aria-label="scrollable auto tabs example"
          >
            <Tab label="BOM" value="1" />
            <Tab label="Routing" value="2" />
            <Tab label="Depre" value="3" />
            <Tab label="OMC" value="4" />
          </TabList>
        </Box>
        <TabPanel style={{ padding: 10 }} value="1">
          <div className="m-0 p-0" style={{ height: 400, width: "100%" }}>
            <DataGrid {...data} components={{ Toolbar: GridToolbar }} />
          </div>
        </TabPanel>
        <TabPanel value="2">Routing</TabPanel>
        <TabPanel value="3">Depre</TabPanel>
        <TabPanel value="4">OMC</TabPanel>
      </TabContext>
    </Box>
  </div>
);
};

问题根源 #

你给外层div添加了flex布局，但form元素默认是块级元素，会占满父容器宽度，且form内部的Autocomplete和Button默认是垂直排列的，外层flex无法影响到form内部的元素布局。

解决方法 #

给form元素添加flex布局，让内部的输入框和按钮横向排列，同时可调整对齐方式和间距：

• 给form添加flex相关样式（用className或MUI的sx属性均可），设置display: flex、gap（控制元素间距）、align-items: center（垂直居中对齐）；
• 根据需求调整Autocomplete的宽度：可以保持固定宽度，或者设置flex:1让它自适应剩余空间。

修改后的代码示例（关键部分） #

<div className="p-2 justify-center mt-4 flex">
  <form
    onSubmit={(e) => {
      e.preventDefault();
    }}
    className="flex gap-2 items-center" // 添加flex布局类
    // 也可以用MUI sx属性：sx={{ display: 'flex', gap: 2, alignItems: 'center' }}
  >
    <Autocomplete
      style={{ width: "100%" }}
      id="grouped-demo"
      options={options.sort(
        (a, b, index) => -b.firstLetter.localeCompare(a.firstLetter)
      )}
      groupBy={(option) => option.firstLetter}
      getOptionLabel={(option) => option.title}
      sx={{ width: 300 }} // 保持固定宽度，或改为flex:1自适应剩余空间
      renderInput={(params) => {
        params.inputProps.onKeyDown = handleKeyDown;
        return <TextField {...params} label="Search SKU" />;
      }}
      renderGroup={(params) => (
        <li key={params.key}>
          <GroupHeader>{params.group}</GroupHeader>
          <GroupItems>{params.children}</GroupItems>
        </li>
      )}
    />
    <Button variant="contained">Search</Button>
  </form>
</div>

说明 #

• 添加flex后，form内部元素会横向排列；
• gap-2（或sx中的gap:2）控制输入框和按钮的间距；
• items-center让按钮与输入框在垂直方向居中对齐；
• 若希望输入框占满form剩余空间，将Autocomplete的sx改为flex:1即可，无需固定width。

内容的提问来源于stack exchange，提问作者JS24