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

Question

之前在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>

标题和导航的css代码：

 html, body {
   overflow-x:scroll;
 }
header {
position: fixed;
height: 40px;
top: 0px;
width: 100%;
vertical-align: top;
background:#2748ab;
margin-left:-8px;
}
nav
{
position: fixed;
vertical-align: top;
margin-top:10px;
top: 0px;
float:left;
margin-left:23%;
width:76.5%;
}

我按如下方式更改了导航栏：

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

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

Answer 1

您需要在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放入该媒体的分辨率。您需要使用更多检查元素进行测试。您还可以添加自适应菜单代码。所以你的标题会完美调整。

我建议您使用https://webflow.com开发响应式网站。因此，您不必担心反应性头痛。

Answer 2

如果您测量布局的总外部宽度。并设置外部div或body的最小宽度。如果调整浏览器大小，它显示水平滚动条和对齐不变。

例如：

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

或

体{最小宽度：1240px;}