gpt4 book ai didi

css - 带有 CSS 元素的 Html5 在缩放时移动

转载 作者:行者123 更新时间:2023-11-28 12:15:08 24 4
gpt4 key购买 nike

大家好,这可能是一个简单的问题,但我在我的 HTML 和 CSS 页面中遇到了这个问题。

问题:当我放大时,“部分”部分移动到导航下方,当我缩小时,页脚移动到部分部分旁边......

这是我的 HTML 页面的示例:

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8">
<title>MyWebsite</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<header>
Header
</header>


<body>



<nav>
<ul>
<li>
Tab1
</li>
<li>
Tab2
</li>
<li>
Tab3
</li>
<li>
Tab4
</li>
<li>
Tab5
</li>


</ul>
</nav>



<section id="">
Section
</section>

<footer>
Footer
</footer>



</body>


</html>`

这是 CSS 页面:

header
{
width: 1325px;
height: 150px;
background-color: green;
position: relative;
}

nav
{
position: relative;
width: 400px;
height: 500px;
background-color: teal;
float: left;
overflow: hidden;
}

section
{
position: relative;
float: left;
width: 925px;
height: 500px;
background-color: blue;
}

footer
{
float: left;
width: 1325px;
height: 50px;
background-color: lime;
position: relative;
overflow: hidden;
}

感谢您的帮助和提前时间

最佳答案

您的 body 标记需要位于 header 之前。向您的 HTML/CSS 添加一个具有宽度的包装器。

这是一个 fiddle :http://jsfiddle.net/msJLW/

<div id="wrap">
<header>
Header
</header>
<nav>
<ul>
<li>
Tab1
</li>
<li>
Tab2
</li>
<li>
Tab3
</li>
<li>
Tab4
</li>
<li>
Tab5
</li>
</ul>
</nav>
<section id="">
Section
</section>

<footer>
Footer
</footer>

</div>

#wrap{
width:1325px;
}
header
{
width: 1325px;
height: 150px;
background-color: green;

}

nav
{
width: 400px;
height: 500px;
background-color: teal;
float: left;
overflow: hidden;
}

section
{
float: left;
width: 925px;
height: 500px;
background-color: blue;
}

footer
{
float: left;
width: 1325px;
height: 50px;
background-color: lime;
overflow: hidden;
}

关于css - 带有 CSS 元素的 Html5 在缩放时移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19228488/

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