HTML&；CSS创建的网页不应在调整浏览器大小时更改/调整元素的位置

我是HTML和CSS的初学者。我正在尝试用HTML制作一个非常基本的网页。 我面临一个问题。调整浏览器大小时，导航项的位置会自动更改。有没有办法确定那个位置

@font-face{font-family:sansation；src:url（'sanslight.ttf'）；}
身体{
保证金：0；
填充：0；
溢出：自动；
背景色：#F8；
字体系列：sansation；
颜色：白色；
}
/*------标题-------------*/
.集装箱{
最大宽度：920px；
宽度：100%；
保证金：自动；
溢出：隐藏；
填充：10px21px；
边框底部：2倍实心暗色；
背景色：白色；
}
托普纳夫先生{
浮动：对；
溢出：隐藏；
利润上限：4倍；
}
.topnav a{
颜色：白色；
显示：内联块；
线高：正常；
左边距：15px；
文字装饰：无；
填充：10px 20px；
背景色：#ff9900；
}
.topnav a:悬停{
背景色：#ffad33；
字体：斜体；
边界：无；
垫底：6px；
边框底部：4px实心#e68a00；
}
.topnav a.active{
垫底：6px；
字号：600；
背景色：#ff9900；
字体风格：普通；
边框底部：4px实心#e68a00；
}
.标志{
边缘顶部：2倍；
}
/*-------内容-------*/
.幻灯片放映{
最大宽度：960像素；
身高：100%；
宽度：100%；
边框：2倍实心暗灰色；
左边距：自动；
右边距：自动；
利润上限：21px；
}
氢{
宽度：923px；
线高：25px；
填充：10px21px；
字母间距：1px；
左边距：自动；
右边距：自动；
背景：ff9900；
}
博士{
颜色：黑色；
最大宽度：960像素；
宽度：100%；
左边距：自动；
右边距：自动；
浮动：无；
文本对齐：居中；
溢出：隐藏；
背景：白色；
边框宽度：2倍；
}
博士{
字体大小：14px；
文本对齐：居中；
}
.演示，桌面，td{
颜色：暗灰色；
最大宽度：960像素；
宽度：33%；
左边距：自动；
右边距：自动；
边界塌陷：塌陷；
填充：继承；
文本对齐：居中；
}

在线医生支持
欢迎
博士1
博士2
博士3
描述
描述
描述

这是因为您为

.container

指定了宽度为

100%

。 如果您不希望元素更改窗口大小，请考虑给容器提供固定宽度（这是不推荐的，违背了响应的设计原则）。 一旦它在桌面浏览器上被修复，那么也许您可以（使用

@media

查询）来支持各种屏幕和分辨率

    @font-face { font-family: sansation; src: url('sanslight.ttf'); }

body{
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #f8f8f8;
    font-family: sansation;
    color:white;
}

/* ---------Header-------------*/
.container{
    max-width: 920px;
    width: 100%;
    margin: auto;
    overflow: hidden;
    padding:10px 21px;
    border-bottom: 2px solid darkgrey;
    background-color: white;

}

.topnav {
    float: right;
    overflow: hidden;
    margin-top: 4px;
}

.topnav a{
    color: white;
    display: inline-block;
    line-height: normal;
    margin-left: 15px;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #ff9900;
}

.topnav a:hover{
    background-color: #ffad33;
    font-style: italic;
    border: none;
    padding-bottom: 6px;
    border-bottom:  4px solid #e68a00;
}
.topnav a.active{
    padding-bottom: 6px;
    font-weight: 600;
    background-color: #ff9900;
    font-style: normal;
    border-bottom: 4px solid #e68a00;    
}

.logo{
    margin-top: 2px;
}



/*-------CONTENT-------*/
.slideshow{
    max-width: 960px;
    height: 100%;
    width: 100%;
    border: 2px solid darkgrey;
    margin-left: auto;
    margin-right: auto;
    margin-top: 21px;
}

h2{
    width: 923px;
    line-height: 25px;
    padding: 10px 21px;
    letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
    background: #ff9900;

}

.doctor{
    color:black;
    max-width: 960px;
    width: 100%;  
    margin-left: auto;
    margin-right: auto;
    float: none;
    text-align: center;
    overflow: hidden;
    background: white;
    border-width: 2px;
}

.doctor tr{
    font-size: 14px;
    text-align: center;

}

.demo ,table ,td{
    color: darkgray;
    max-width: 960px;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    padding: inherit;
    text-align: center;   
}
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
p {
    min-height: 100px;
}
}

---

---

您向css写入这些类型以添加媒体查询，并根据自己的意愿设计页面

您需要使用@media queryTahir Hamza当您使用@media query每个分辨率时，您的工作将按照您的要求完成wish@AshishShahi谢谢你的帮助：）你能帮我做一下@media查询吗？我应该在哪里添加它？你在cssKamaza中添加媒体查询你看了这些链接你知道如何在css中添加媒体查询吗