Html 调整浏览器大小时如何停止水平重叠？

以前在stackoverflow中给出的任何解决方案都不能解决我的问题。如果有人能解决这个问题，那么请帮助我。我想要：当浏览器最小化时，水平滚动条应该出现，div不应该相互重叠

标题的html代码：

<header><label class="font_white">LIZA's World</label>
        <nav>
            <ul>
                <li><a href="hello.html" class="nav_font">hellohello &nbsp;&nbsp;&nbsp;|</a></li>
                <li><a href="hi.html" class="nav_font">HIHO &nbsp;&nbsp;&nbsp;|</a></li>
                <li><a href="hey.html" class="nav_font">Heyhey &nbsp;&nbsp;&nbsp;|</a></li>
                <li><a href="ciao.html" class="nav_font">Ciao Ciao Ciao Ciao &nbsp;&nbsp;&nbsp;|</a></li>
                <li><label class="nav_name">Liza</label></li>
                <li>
            <form id="search" method="get" action="hello.html" style="float:right">
             <input type="text" class="searchbar"  size="50" maxlength="120" value="Search..." />
             <input type="button" class="search_button"/> 
            </form>
                </li>
            </ul>
        </nav>

    </header>

我将导航更改如下：

nav
{
 position: fixed;
 vertical-align: top;
 margin-top:10px;
 top: 0px;
 float:left;
 margin-left:320px;
 min-width:1000px;
}

---

现在重叠问题已经解决，但是水平滚动条问题还没有解决。

您需要在CSS中添加媒体，了解如何将媒体添加到CSS中，并使您的网站具有响应性

/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024   - desktop (default grid)
 1024-768    - tablet landscape
768-480     - tablet 
 480-less    - phone landscape & smaller
 --------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
 .logo{

    width:80px;
   }     

 }

@media all and (min-width: 768px) and (max-width: 1024px) { 
 .logo{

    width:80px;
   }  }

@media all and (min-width: 480px) and (max-width: 768px) {
 .logo{

    width:50px;
   }   }

@media all and (max-width: 480px) {
 .logo{

    width:100%;
   }   
  }


/* Portrait */
@media screen and (orientation:portrait) { 
  .logo{

    width:100%;
   }  
 }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

 /* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

你只需要检查你想把哪种分辨率和特定的CSS转换成那个媒体。您需要使用更多的inspect元素进行测试。您还可以添加响应菜单代码。所以你的头会调整得很好

---

我会建议你使用开发响应性网站。因此，如果您测量布局的总外部宽度，就不必担心响应性头痛。

。并设置外部div或body的最小宽度。如果调整浏览器大小，则显示水平滚动条，对齐方式不变

例：

.outerdiv{最小宽度：1240px；}

或

---

body{minwidth:1240px；}

所以我们应该猜一下这是如何编码的？来吧，想一想。在看不到

HTML

和

CSS

的情况下，我们如何提供帮助。您应该开始研究响应性设计和媒体查询，当屏幕达到一定大小时，您需要在CSS中重新排列元素。@Ruddy我添加了code@liza现在，您认为需要在每个媒体上分别添加不同的CSS。例如，如果您的徽标尺寸较大，则在所有媒体分辨率中添加较小尺寸的徽标。如果您有足够的时间签出webflow。您只需使用响应代码即可在2小时内完成所有工作。@liza我只需编辑代码。这只是一个例子。您必须输入自己的值。我会建议使用webflow，你将在几个小时内创建整个网站。我应该在htmlIt中的什么地方放置logo类只是一个例子，你需要如何使用媒体标签。logo是您的logo的类别。你看到webflow了吗？我的重叠问题解决了。。。现在水平滚动条问题还没有解决yetthanks。这一个帮助我解决了重叠问题

/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024   - desktop (default grid)
 1024-768    - tablet landscape
768-480     - tablet 
 480-less    - phone landscape & smaller
 --------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
 .logo{

    width:80px;
   }     

 }

@media all and (min-width: 768px) and (max-width: 1024px) { 
 .logo{

    width:80px;
   }  }

@media all and (min-width: 480px) and (max-width: 768px) {
 .logo{

    width:50px;
   }   }

@media all and (max-width: 480px) {
 .logo{

    width:100%;
   }   
  }


/* Portrait */
@media screen and (orientation:portrait) { 
  .logo{

    width:100%;
   }  
 }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

 /* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}