gpt4 book ai didi

javascript - header 比父元素宽 ~60%?

转载 作者:太空宇宙 更新时间:2023-11-04 11:35:37 26 4
gpt4 key购买 nike

我的新网站上的标题比正文宽约 60%,并且可以横向滚动。根本不应该有任何溢出。我在 ul 周围放置了一个边框来检查它,但这不是问题所在。我的 JS 和 CSS 有冲突吗?

    html {
width: 100%;
}

* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }



.header {
display: block;
position: fixed;
background-color: #222323;
margin: 0 auto;
width: 100%;
height: 100%;
left: 0;
top: 0;

-webkit-transform-origin: center top;
transform-origin: center top;
}

.logo img {
display: block;
position: relative;
width: 50%;
margin: 0 auto;
margin-top: 9%;
z-index: 100;
opacity: 0;
-webkit-transform-origin: center top;
transform-origin: center top;
}


ul {
z-index: 101;
list-style: none;
position: relative;
top: 60px;
margin: 0;
padding: 0;
opacity: 0;

}
    <script type="text/javascript">
function init() {

var intro = document.getElementsByTagName('img')[0];
var head = document.getElementsByClassName('header');
var logo = document.getElementsByTagName('img');
var nav = document.getElementsByTagName('ul');
var tl = new TimelineLite();

tl.to(intro, 2, {opacity: 0.5, delay:1})
tl.to(intro, 1, {opacity: 1}, 2)
tl.to(head, 1, {scaleY: 0.2}, 3)
tl.to(logo, 1, {scaleX:0.2}, 3)
tl.to(nav, 2, {opacity: 1}, 4.5);
}
</script>
</head>

<body onLoad="init()">
<div class="header" id="head">
<a class="logo" href="index.html"><img id="logo" src="img/logo-white.png"></a>
</div>
<ul id="navbar">
<div class="left">
<li><a href="index.html" id="home" class="hoverbox">home</a></li>
<li><a href="about.html" id="about" class="hoverbox">about</a></li>
<li><a href="services.html" id="services" class="hoverbox">services</a></li>
</div>
<div class="right">
<li><a href="work.html" id="work" class="hoverbox">work</a></li>
<li><a href="process.html" id="process" class="hoverbox">process</a></li>
<li><a href="contact.html" id="contact" class="hoverbox">contact</a></li>
</div>
</ul>

最佳答案

滚动导航是由 div.right 引起的。在您的 .right 类中,您有 left: 840px; 并且这会将元素推到视口(viewport)的右侧,从而导致滚动。一个快速的解决方案是设置 position: absoluteright: 0:

.right {
display: block;
position: absolute;
left: 840px;
right: 0;
}

但我会认真考虑审查所有代码(css 和 html),因为似乎有很多东西使用不当。

关于javascript - header 比父元素宽 ~60%?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31778990/

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