Html 车身在响应/移动模式下展开
我正在制作一个网站的响应式移动版本,当我发现身体在调整窗口大小时会膨胀,这里是它的屏幕截图(标题是粉红色的,这样我就可以发现错误所在的像素,啊,是的,它是意大利语的,但不用担心): 代码如下:Html 车身在响应/移动模式下展开,html,css,expand,Html,Css,Expand,我正在制作一个网站的响应式移动版本,当我发现身体在调整窗口大小时会膨胀,这里是它的屏幕截图(标题是粉红色的,这样我就可以发现错误所在的像素,啊,是的,它是意大利语的,但不用担心): 代码如下: <head> <meta charset="utf-8"> <title> Ravenna | Home </title> <link rel=
<head>
<meta charset="utf-8">
<title>
Ravenna | Home
</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/zoom-marker.css"/>
<link rel="shortcut icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/script.js" async></script>
</head>
<body id="body">
<div id="progressbar"></div>
<div id="scrollPath"></div>
<section id="hd" class="header">
<a href="index.html" class="logo" style="display: flex;"><h2>Ravenna</h2></a>
<nav>
<ul>
<li class="menu">
<a href="storia.html">Storia</a>
<ul class="ani-menu">
<li><a class="aestr1" href="antica.html">Antica</a></li>
<li><a class="a" href="esarcato.html">L'Esarcato</a></li>
<li><a class="a" href="medioevo.html">Medioevo</a></li>
<li><a class="aestr2" href="dal500aoggi.html">Dal 500 a oggi</a></li>
</ul>
</li>
<li class="menu">
<a href="strutture.html">Strutture</a>
<ul class="ani-menu">
<li><a class="aestr1" href="santapollinareinclasse.html">Sant'Apollinare in Classe</a></li>
<li><a class="a" href="museoclassis.html">Museo CLASSIS</a></li>
<li><a class="a" href="portoanticoinclasse.html">Porto Antico in Classe</a></li>
<li><a class="a" href="sanvitale.html">San Vitale</a></li>
<li><a class="a" href="gallaplacidia.html">Galla Placidia</a></li>
<li><a class="a" href="battisteroneoniano.html">Battistero Neoniano</a></li>
<li><a class="a" href="museoarcivescovile.html">Museo Arcivescovile</a></li>
<li><a class="aestr2" href="strutture.html">Altro...</a></li>
</ul>
</li>
<li class="menu">
<a href="banksy.html">Banksy</a>
<ul class="ani-menu">
<li><a class="aestr1" href="chie.html">Chi è</a></li>
<li><a class="a" href="cosacomunica.html">Cosa comunica</a></li>
<li><a class="aestr2" href="spuntiperchiacchierare.html">Spunti per chiacchierare</a></li>
</ul>
</li>
</ul>
</nav>
<div id="burgy" class="burgy">
<a id="onclickburgy" onclick="openSlideMenu()">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</a>
</div>
<div id="side-menu" class="side">
<div id="containerside" class="containerside">
<a href="index.html">Home</a>
<a href="storia.html">Storia</a>
<a href="strutture.html">Strutture</a>
<a href="banksy.html">Banksy</a>
</div>
</div>
</section>
<section class="wall">
<img src="img/Ravenna.jpg" class="fitBg">
<div class="content">
<h2>Benvenuti a Ravenna!</h2>
<p>N.B. Per esplorare il sito rivolgersi ai punti di cui sopra, una guida più completa può essere trovata qui sotto</p>
<div class="animation">
<a href="#tappe">^</a>
</div>
</div>
</section>
</body>
</html>
将此添加到CSS顶部,您的问题将得到解决:
html{
框大小:边框框;
}
*,*::之前,*::之后{
框大小:继承;
}
问题是
.header
上的填充会使元素扩展到超出您希望的位置。更改框大小将修改填充的解释方式,并将其应用于内容区域内部,而不是扩展内容区域。尝试使用overflow-x,如下所示:
html,body{
overflow-x: hidden;
}
看起来很多CSS都丢失了,所以很难复制您看到的内容。也可以看到Paul Irish的建议:。它与您中的两位一起工作,但我无法同时将正确值设置为两个人。非常感谢
html,body{
overflow-x: hidden;
}