大体宽,无水平滚动条 [英] large body width without horizontal scrollbar

查看:103
本文介绍了大体宽,无水平滚动条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我将body宽度设置为1920px,并设置相同宽度的background-image。图像是标题。因为我有更窄的包装在我的身体,如果我把标题背景头本身,标题背景的宽度是由包装的边界。
所以我把它的身体,但现在我有水平滚动条在底部,中心的页面被移动到右边。
我如何摆脱那个滚动条和中心的页面?这是代码:

I set body width to 1920px and set background-image of the same width. The image is for header. Cause I have narrower wrapper inside my body and if I put header background to header itself the header background's width is cut by wrapper's borders. So I put it to body but now I have horizontal scrollbar at the bottom and the center of the page is moved to right. How can I get rid of that scrollbar and center the page? Here is the code:

body {
    background-color: #f6f6f6;
    background-image: url('../img/menu-background.png');
    width: 1920px;
    background-repeat: no-repeat;
    font-family: 'PT Sans';
}

.wrapper {
    width: 950px;
    min-height: 1658px;
    border: 1px solid grey;
    margin: 0 auto;
}

header a {
    text-decoration: none;
    text-align: center;
    display: block;
    width: 365px;
    margin-left: auto;
    margin-right: auto;
} 

HTML:

<body>
    <div class="wrapper">
        <header>
            <a href="#">
                <h1>Lorem ipsum</h1>
                <span>bla-bla-bla</span>
            </a>
        </header>


推荐答案

您可以通过添加
来阻止滚动条 overflow-x:hidden; 加入您的身体

You can prevent the scrollbar by adding overflow-x:hidden; to your body

这篇关于大体宽,无水平滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆