gpt4 book ai didi

html - 在没有水平滚动的情况下,使 HTML 内容居中比浏览器更宽?

转载 作者:行者123 更新时间:2023-11-28 17:46:57 24 4
gpt4 key购买 nike

相关问题不包含有用的答案。

我正在尝试为宽度为 2000 像素(宽度足以覆盖大多数大屏幕)但居中的网站创建标题栏,但我也不想要父容器 div(它是定位在左侧 50%),导致浏览器水平溢出。

我不能只是在 html 或 body 标签上“ overflow hidden ”,因为我没有声明特定的宽度(并且声明 100% 不会 overflow hidden )。

Overflow depiction

我的代码是这样的:

<body>
<div id="navbgout">
<div id="navbg"></div>
</div>

#navbgout {
width:2000px;
height:60px;
position:relative;
left:50%;
}

#navbg {
width:2000px;
height:80px;
position:relative;
left:-50%;
background-image:url("images/header_bg.png");
}

我尝试在其周围放置另一个父容器以提供溢出:隐藏,但没有任何效果。如果我将该父级设置为 100% 宽度,则它不会屏蔽。如果我将它设置为以像素为单位的固定值,则它不会反射大小。

这特别令人烦恼,因为 iPad 的移动 Safari 会将这个“溢出”宽度读取为真实宽度,并将页面缩小得更远以解决它。

最佳答案

您无需将宽度声明为 2000 像素即可适应屏幕尺寸。如果您将宽度设置为 100%,那么它将始终调整为视口(viewport)的宽度。

理想情况下,您可以将宽度设置为 100%,然后添加一个容器类,例如max-width: 1200px;margin: 0 auto; 这将使导航栏始终是视口(viewport)的宽度,但也允许内容在屏幕上居中。

关于html - 在没有水平滚动的情况下,使 HTML 内容居中比浏览器更宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23067967/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com