gpt4 book ai didi

当浏览器处于半屏状态时,HTML/CSS 标题在右侧折叠

转载 作者:行者123 更新时间:2023-11-28 01:49:59 24 4
gpt4 key购买 nike

我已经学习 HTML/CSS 大约两周了。

我一直在制作虚拟网站只是为了练习,最近我一直在努力解决 header 问题。我将发布代码/图片以帮助尽可能具体。

我试图在我的网页上设置一个标题,顶部是纯色背景,然后是标题左侧的 Logo (标题)和右侧的导航/搜索栏全部在 1020 像素的容器内。

全屏显示一切似乎都很好,但是当我将浏览器设为半宽时,它似乎使我的导航/搜索栏在右侧离开屏幕,并且当我滚动标题时,背景颜色消失了。

我不确定它为什么要这样做,所以如果有人有修复程序,您能否不仅向我解释它为什么这样做,而且我需要如何/为什么需要做我需要做的事情来修复它。非常感谢!

我的 HTML 文件

<html>

<head>
<title>Dummy Site</title>
<link rel="stylesheet" type="text/css" href="stylez.css">
</head>

<body>


<header>

<div class="container">
<div id="logo">
<h1>Another Dummy Site</h1>
<em>Just another dummy web page</em>
</div>

<div id="nav">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<form>
<input type="search" placeholder="search 4 somethin">
</form>
</div>

</div>

<div class="clearfix"></div>

</header>

</body>

</html>

CSS:

*{
margin: 9;
padding: 9;
}
body {
font-family: monospace, sans-serif;
width: 109%;
background: #ccc;
}

header{
background: #fc9;
}

.container{
width: 1020px;
margin: 9 auto;
}

#logo{
float: left;
}

#nav{
float: right;
}
.clearfix::after{
content:"";
clear: both;
display: table;
}

这是全屏的网站图片 enter image description here

这是它在浏览器半屏中的图片 - 请注意滚动条并在右侧截断。 enter image description here

这是我向右滚动时的照片 enter image description here

最佳答案

试试这个

.container {
max-width:1020px;
width:100%;
margin:0 auto;
}

jsfiddle

关于当浏览器处于半屏状态时,HTML/CSS 标题在右侧折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49999109/

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