reactjs React Material容器header main和footer它没有在header中使用flexbox对齐

rryofs0p 于 2023-06-05 发布在 React

关注(0)|答案(1)|浏览(451)

我的目标是建立一个简单的布局
有页眉和页脚，但我有
对准的问题。
标头容器未对齐
带有主和页脚（在左侧稍微移动）

1条答案

Ciao，我找到了header container与main和footer不对齐的原因：是header类中的display: 'flex'，由于某种原因，它在头中创建了填充。
问题是，如果你删除它，所有的标题将显示如下：

所以我找到了这个解决方案：
保持header类不变，并为头容器创建bck_masthead类：

bck_masthead: {
   backgroundColor: '#F39C6B',
   position: 'absolute',
   marginLeft: '25%'
}

因此，桅顶容器变为：

<Container className={classes.bck_masthead} maxWidth="md">
   <div className={classes.masthead}>
      Masthead
   </div>
 </Container>

结果是：

Here您的代码已修改。