css - 如何改变浏览器窗口尺寸后元素换行?
本文介绍了css - 如何改变浏览器窗口尺寸后元素换行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在实现导航栏时有这样一个需求:
左侧是一个logo,右侧是若干导航,要求两个在一行,右侧导航在除logo占得容器外居中。
出现的问题如下:
改变浏览器窗口大小后,后面居中的元素换行了。
错误情况如:
具体代码如下:
-
CSS:
.container{ min-width: 1002px; text-align: center; } .logo{ width:300px; height:50px; float:left; background-color: red; } .nav{ height:50px; width:800px; display: inline-block; background-color: blue; }
-
html:
<div class="container"> <div class="logo"></div> <div class="nav"></div> </div>
这种情况应该如何实现?真实情况下这种需求该如何处理?
解决方案
點進去試試
例子
.container{
min-width: 1002px;
text-align: center;
display: flex;
}
.logo {
width:300px;
background-color: red;
}
.nav{
height: 60px;
width: 800px;
margin: 0 auto; /* <- 居中關鍵 */
background-color: blue;
}
这篇关于css - 如何改变浏览器窗口尺寸后元素换行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文