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

之前在stackoverflow中给出的解决方案都不能解决我的问题。如果有人有解决这个问题，那么请请帮助我。我想：当浏览器被最小化的水平滚动条应该出现和的div不应为标题彼此重叠如何在浏览器调整大小时停止水平重叠？

When the browser is maximized

When the browser is restored down

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

现在重叠的问题就解决了，但是，水平滚动条的问题尚未解决。

来源

2015-04-24 liza

因此，我们应该想这是如何编码的太？来吧，想一想。没有看到HTML和CSS，我们该如何帮忙。 – Ruddy

您应该开始查看响应式设计和媒体查询，当屏幕达到特定大小时，您需要重新安排CSS中的元素。 – multimediaxp

@Ruddy我添加了代码 – liza

您需要在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来开发响应式网站。所以你不必担心响应性头痛。

来源

2015-04-24 07:34:26 Codelord

然后该怎么做 – liza

@liza现在认为你需要在每个媒体上分别添加不同的CSS。例如，如果您的徽标尺寸较大，请将较小尺寸的徽标添加到所有媒体分辨率。如果你有足够的时间检查webflow。你只会在2小时内完成你所有的工作，只有响应式代码。 – Codelord

你可以写代码 – liza

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

例：

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

或

体{最小宽度：1240px;}

来源

2015-04-24 07:36:57

谢谢。这个帮助我解决了重叠问题 – liza

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

回答

相关问题