如何将标头扩展到整个页面宽度? [英] How to extend header to the full page width?
本文介绍了如何将标头扩展到整个页面宽度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将标题扩展到整个页面?我已经尝试过margin-left&是的,但这是行不通的.
How can I extend my header to the full page? I have tried margin-left & right but that doesn't work.
Header.css
Header.css
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文件:
Here's my app.tsx file:
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元素可能有余量.尝试设置:
Looks like there could be a margin for your body element. Try setting:
body{
margin: 0;
}
这篇关于如何将标头扩展到整个页面宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文