如何让网格项元素显示在一行上？答案

【问题标题】：How can I have grid item elements displayed on one line?如何让网格项元素显示在一行上？
【发布时间】：2021-08-23 15:55:05
【问题描述】：

我刚开始学习 Material-ui，但是当我使用 Grid 时，我得到了一个错误。这是我的代码。

我的要求是将标题按钮放在同一行，如果我缩小它会显示为滚动条

      <Grid container spacing={1}>
        <Grid item xs={12} md={7}>
          <UserList></UserList>
        </Grid>
      </Grid>

当我更改代码时：

       <Grid container xs={12} md={7} spacing={1}>
        <UserList></UserList>
      </Grid>

我可以得到我想要的： enter image description here

我知道Grid 的道具md 必须用于物品。但是我该如何写才能得到我想要的结果呢？

希望有人能帮帮我！谢谢！

【问题讨论】：

尝试在 Grid 容器上提供 direction='row' 属性，<Grid container direction='row'> <Grid item xs={12} md={7}> <UserList></UserList> </Grid> </Grid>
感谢您的回答，但这似乎不是我想要的。它仍然没有显示在一行上。
因为您尝试插入按钮（搜索和 +），所以可以尝试使用 Material UI 中的 TableCell。如果可能的话，也可以在代码和框中发布最少的代码。

【解决方案1】：

在第一种情况下，您为网格项目（即您的 <UserList /> 组件）分配了 7 列。现在，包含搜索图标等的标题部分包含在这 7 列中，我想这就是标题部分的设计方式（可能带有 flex 显示），但下部即表格具有固定的宽度和这就是为什么它溢出并导致水平滚动的原因。它的行为符合预期。

在第二种情况下，您编写代码的方式对使用网格布局没有任何意义，它为您提供了您最终需要的东西，因为它就像根本不使用任何网格布局一样，<UserList />整个宽度。

请考虑一下您真正想在哪里使用网格。可能您实际上并不想将整个组件 <UserList /> 作为网格项。不过，如果您只想使用网格中的一项，您可能想给它md={12}。

【讨论】：

感谢您的回答。我知道你的意思。我想要的是我的表格和标题按钮的大小可以随着屏幕缩小而缩小，所以我使用了 md。我想知道为什么当我使用 MD 时，听者按钮会被挤压当屏幕缩小时进入底行。我想要的是这些按钮有一个像表格一样的水平滚动条。就像在 css 中使用 'display:inline' 一样。（我尝试在样式中添加它，但它不起作用。）我希望你能看到它并回答我非常感谢
哦，好的，既然如此，请分享与header部分相关的代码，如果可能的话，也可以提供header的css。除非你发布你写的东西，否则很难弄清楚为什么它没有按照你想要的方式工作。
非常感谢，这是我的代码：link。很抱歉，也许我的代码很混乱