Question

我是一个相当新的Html，CSS和我目前正在制作一个非常业余的网站，我遇到的问题是每当我尝试将窗口从全屏重新调整到非常小的一切都开始移动，即使我的导航栏在某些时候变为垂直，感觉有些部分没有被锁定＆＃34;在适当的地方让我们说这样生病给你一个链接到我的网站所以你可以自己看到我的Html和CSS代码在下面，任何想法如何解决这个问题？我已经尝试搜索并添加以下代码但没有任何成功.. http://dwaight.magix.net/public/# 提前谢谢..

HTML CODE

<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; }

Answer 1

这里发生的事情是内容简直就是流动。

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

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

min-width: 60em;

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

Answer 2

在你的容器div中你应该放一个最小宽度。这样你的网站就会减少，直到达到最小宽度限制。

.container{
    min-width:1000px;
}

希望它有所帮助！

加上额外的：字体大小你应该考虑避免百分比，并使用＆＃34; em＆＃34;必要时（1em = 14px）

Answer 3

您可以为容器添加宽度

.container{width: 1200px;}

Answer 4

您需要为<nav>提供最小宽度：

nav{
min-width:1200px;
}

See this fiddle
您的布局是破碎的，因为如果窗口足够大，元素只保持水平，但随着它变小，它们会按照预期的那样向下流动。

Answer 5

打开您的开发人员工具，并在出现问题之前找到屏幕的最大宽度（我认为这对于您的页面大约为1100像素）。然后在你的CSS代码中添加：

html {
    min-width: 400px;
}

这意味着如果窗口宽度小于400像素（将其更改为上面计算出的实际值），则页面将保持400像素并使用水平滚动条。

虽然这会起作用，但通常不被视为最佳做法。请查看http://css-tricks.com/css-media-queries/以获得更好的解决方案。

如何在调整屏幕大小时停止元素移动？

5 个答案: