Question

我的新网站上的标题比正文宽约60％，并且可以滚动x。根本不应该有任何溢出。我在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>

Answer 1

滚动导航由div.right引起。在.right班级中，您有left: 840px;，这会将元素向右推出视口，从而导致滚动。一个快速的解决方案是设置position: absolute和right: 0：

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

但我会认真考虑检查所有代码（css和html），因为似乎有很多东西不合适用。

标题比父元素宽约60％？

1 个答案: