无法获得理由内容与弹性框和材料 UI 一起使用

Question

我正在尝试将一些jsx返回到material-ui卡组件的标题道具。我希望两个框之间有空格。即一个在标题的左侧，一个在标题的右侧。

弹性框按预期内联显示div，但我无法让它们在水平轴上移动。 附上一张图片，它看起来像ATM.screenshot

renderCardTitle() {
    return (
      <div style={{ display: 'inline-flex', justifyContent: 'space-between' }}>
            <div>
                first box
            </div>
            <div style={{ alignSelf: 'flex-end' }}>
                second box
            </div>
        </div>
    );
  }

有问题的卡组件的代码是：

 <Card style={styles.cardStyles}>
      <CardHeader
      title={this.renderCardTitle()}
      actAsExpander
      showExpandableButton
      />
      <CardText expandable>
        details about the quiz
      </CardText>
     </Card>

任何帮助都非常感谢！

Answer 1

>display: inline-flex会将其父级折叠为内容大小，因此justify-content不起作用，因此请改用display: flex

body > div {
  padding: 5px;
}
div {
  border: 1px solid gray;
}

<div style="display: flex; justify-content: space-between">
  <div>
    first box
  </div>
  <div>
    second box
  </div>
</div>

或者为父项提供比 2 个框内容宽的宽度

body > div {
  width: 50%;
  padding: 5px;
}
div {
  border: 1px solid gray;
}

<div style="display: inline-flex; justify-content: space-between">
  <div>
    first box
  </div>
  <div>
    second box
  </div>
</div>

或者在 2：nd 框中添加边距

body > div {
  padding: 5px;
}
div {
  border: 1px solid gray;
}

<div style="display: inline-flex;">
  <div>
    first box
  </div>
  <div style="margin-left: 20px;">
    second box
  </div>
</div>

Answer 2

它可能是顶部div 的宽度。它不跨越整个卡头容器。尝试设置width:'100%'。

renderCardTitle() {
return (
  <div style={{ width:'100%' display: 'inline-flex', justifyContent: 'space-between' }}>
        <div>
            first box
        </div>
        <div style={{ alignSelf: 'flex-end' }}>
            second box
        </div>
    </div>
);
}

Answer 3

感谢给出的答案，帮助找到了一个双重问题：

1( 父div 未设置为宽度 100%，要覆盖卡片标题文本组件的内联样式，请使用卡片标题组件的文本样式属性，如材料 UI 文档中所述 http://www.material-ui.com/#/components/card

      <CardHeader
      title={this.renderCardTitle()}
      actAsExpander
      showExpandableButton
      textStyle={{ width: '100%' }}
      />

2(如其中一个答案所述，还需要使用flex而不是inline-flex，因为inline flex会折叠到它所包含的内容的大小。