gpt4 book ai didi

html - 调整屏幕大小时如何停止元素移动?

转载 作者:太空宇宙 更新时间:2023-11-04 12:59:44 25 4
gpt4 key购买 nike

我对 Html、css 还很陌生,我目前正在制作一个非常业余的网站,我遇到的问题是每当我尝试将窗口从全屏调整为非常小时,一切都开始移动,甚至我的导航栏在某个时候变为垂直,感觉有些部分没有“锁定”到位让我们这样说我会给你一个我网站的链接这样你自己也可以看到我的 Html 和 css 代码在下面,知道如何解决这个问题吗?我已经尝试搜索并添加以下代码但没有任何成功.. http://dwaight.magix.net/public/#提前致谢..

HTML 代码

<body> 
<div class="container">
<div class="header">
<h1 style="margin-top:0;">KYOTO INDUNSTIRES</h1></div>
<ul div class="nav">
<ul style="list-style: none; ">
<li><a href="#">Kyoto</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

<div class="content">Hier komt de inhoud van de pagina. </div>
<div class="footer">Hier plaats je de footer. </div>
</div>
</body>

CSS 代码

.header h1  {
text-align: center;
font-family: "GatsbyFLF";
font-size: 150px;

}
.nav {
font-size: 250%;
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
.nav li {
float: left; }
.nav li a {
font-family: "GatsbyFLF";
display: inline-block;
padding: 15px 100px;
text-decoration: none;
font-weight: bold;
color: #000000;
border-right: 1px solid #ccc; }

.nav li a:hover {
color: #000000;
background-color: #fff; }

最佳答案

这里发生的是内容只是在流动。

元素重新定位是件好事。这使您的内容无论分辨率如何都可见。诀窍是让您的内容以受控的方式重新定位。

一种快速而肮脏的方法是简单地在您网站的外部容器上设置最小宽度。这可以通过 CSS 完成:

min-width: 60em;

但实际上,如果您这样做,用户将不得不左右滚动才能看到您的内容。通常最好让流程自行解决。如果你想要额外的控制,你可以查看 CSS media queries这允许您为不同的分辨率和条件设置不同的 CSS 属性。

关于html - 调整屏幕大小时如何停止元素移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25538618/

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