制作卡片（或纸张）不占用全宽 Material UI答案

【问题标题】：Make Card (or Paper) NOT take up full width Material UI制作卡片（或纸张）不占用全宽 Material UI
【发布时间】：2019-04-05 20:51:41
【问题描述】：

我正在尝试创建一个不跨越它所在容器的整个宽度的卡片元素。

Example 似乎可以做到这一点

但是当我尝试使用示例代码时，我的卡片会拉伸页面的整个宽度。

【问题讨论】：

【解决方案1】：

您好，当我运行您的示例时，它也跨越了整个页面，但这是一个简单的解决方法。在您的 Style.css 中，您可以添加一个 css 选择器 来将 Card 组件的显示更改为 inline-block。

Style.css

    /* Card component */
    #root > div > div {
          display: inline-block;
    }

【讨论】：

谢谢！我认为更具体的解决方案是将style={{display: 'inline-block'}} 添加到Card 元素中。
我会把你的css分成另一个文件，一般我不会使用内联样式。如果您只希望卡是内联块，您也可以执行您提到的操作。看看你的例子，我想你希望标题跨越相同的宽度:)
是的，您绝对可以将其分离到另一个文件中，但这不是重点。无论如何，我感谢您的帮助。 inline-block 是我所需要的。但是，我觉得您现在的编辑并不能完全传达正确的答案，并且信息太多。我认为答案应该简短而甜蜜：在卡片元素中添加inline-block
np 很高兴我能提供帮助，我也会编辑答案
我推荐使用flex-grow: 1，保持material-ui的显示类型（即flex）

【解决方案2】：

如果你想应用 inline-block 解决方案，一个干净的方法是将卡片包裹在一个盒子里

<Box display="inline-block">
    <Card...
</Box>

【讨论】：

【解决方案3】：

使用尺寸：

import { sizing } from '@material-ui/system';

card :{
    width:"50%"
}

【讨论】：