如何将标题扩展到整个页面宽度？ [复制]

Posted 2023-02-22

【中文标题】如何将标题扩展到整个页面宽度？ [复制]

【英文标题】：How can I extend the header to the full page width? [duplicate]

【发布时间】：2020-05-18 03:21:14

【问题描述】：

如何将标题扩展到整页？我试过margin-left & right，但是没用。

Header.css

.header
    background: green;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    left: 0;
    right: 0;
 


  .header-right 
    float: right;
  

  @media screen and (max-width: 500px) 
    .header-right 
      float: none;
    
  

这是我的 app.tsx 文件：

const Header = () => (
  <div className = 'header'>
  <h1>Instaride</h1>
  <div className="header-right">
    <Button> Sign In</Button>
    <Button> Contact</Button>
  </div>
</div>
);

export default Header;

我也试过了：

body, html
    margin:0;
    padding:0;

【问题讨论】：

这段代码有什么问题，结果如何？

无论您共享什么代码，它都可以完美运行 - react-xukh1h.stackblitz.io 可能是您包含了一些 CSS 主题或库，它们可能会干扰您想要实现的任何目标。

它对我来说也很好用......

不要重复这个问题。如果您认为副本不合适，请编辑旧的。您的旧问题仍显示在第一个搜索页面中

@TemaniAfif 在我的第一个帖子不必要地关闭后我再次发布。建议的链接对我来说没有帮助:)

【参考方案1】：

只需在您的组件中添加document.body.style.margin = 0;。

这是您使用 MUI 样式的组件，

import React from "react";
import  makeStyles  from "@material-ui/styles";
import  Button  from "@material-ui/core";

const useStyles = makeStyles(
  header: 
    background: "green",
    height: "70px",
    width: "100%",
    display: "flex",
    justifyContent: "space-between",
    marginBottom: "25px",
    left: "0",
    right: "0"
  ,
  headerRight: 
    float: "right",
    color: "blue"
  
);

export default function Header() 
  document.body.style.margin = 0;

  const classes = useStyles();
  return (
    <div className=classes.header>
      <h1>Instaride</h1>
      <div className=classes.headerRight>
        <Button> Sign In</Button>
        <Button> Contact</Button>
      </div>
    </div>
  );

我还为你创建了沙盒：https://codesandbox.io/s/serene-sun-n5rth?fontsize=14&hidenavigation=1&theme=dark

【讨论】：

但是css是一样的，不是吗？它不能解决问题。

我的错，只需在您的组件中添加document.body.style.margin = 0;，它应该可以正常工作。还编辑了帖子和工作沙箱。

如果我在 const Header() 中使用它，它会给我一个错误。无论如何我可以将它集成到我现有的代码中吗？如果我把它放在我的样式表的顶部，它会给出一个未知的单词错误。

即使删除代码框中的document.body.style.margin = 0;，标题也可以完美显示。所以这不可能是一个解决方案。必须有一些 CSS 优先级。除非我们从提问者那里得到密码箱，否则很难修复它。

【参考方案2】：

无论您共享什么代码，我都可以正常工作 - https://react-xukh1h.stackblitz.io

可能是您包含了一些 css 主题或库，它们可能会侵入您想要实现的任何目标。