我有一个网站,我的导航中有 3 个元素,我想将其保留在一行中。
- 第一个是主菜单,其中包含主要站点链接,应该 在导航栏的左侧。
- 第二个是联系方式 它应该位于导航栏的中央。
- 第三个是授权菜单, 其中有登录/帐户链接等,应该在右边 导航栏。
#nav{
height:50px;
width:100%;
position:relative;
display:flex;
}
ul{
display:inline-block;
height:50px;
line-height:50px;
list-style:none;
}
li{
display:inline-block;
}
#main_menu{
flex:3;
text-align:left;
}
#header_numbers{
flex:4;
text-align:center;
}
#auth_menu{
flex:3;
text-align:right;
}
<div id="nav">
<ul id="main_menu">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
</ul>
<ul id="header_numbers">
<li>menu item 1</li>
<li>menu item 2</li>
</ul>
<ul id="auth_menu">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
</ul>
</div>
如果屏幕太小,不同的菜单会掉到另一行,但我想要发生的是隐藏在中心的带有联系信息的菜单,并且只有左右两个菜单,所以所有内容都保留在一个行。
我不确定是否有办法仅使用 CSS 来实现这一点,除非我执行类似 @media only screen and (max-width: 500px)
的查询,但我宁愿只是将移动/桌面的这些查询保持在最低限度,而不是仅针对一个特定元素进行不同大小的额外查询。
最佳答案
如果您不想使用媒体查询,您可以使用 Javascript/jQuery,但我认为您最好使用媒体查询。
然而,如果您愿意,这是一个 jQuery 解决方案:
在窗口 load
和 resize
事件上放置一个事件处理程序,检查窗口是否等于或等于 500。如果该条件为真,则隐藏#header_numbers
元素,如果为假则显示它。
$(window).on('load resize', function(){
if($(window).width() <= 500) {
$('#header_numbers').hide();
}
else {
$('#header_numbers').show();
}
/* Alternative notation use what you prefer
$(window).width() <= 500 ? $('#header_numbers').hide() : $('#header_numbers').show();
*/
});
#nav{
height:50px;
width:100%;
position:relative;
display:flex;
}
ul{
display:inline-block;
height:50px;
line-height:50px;
list-style:none;
}
li{
display:inline-block;
}
#main_menu{
flex:3;
text-align:left;
}
#header_numbers{
flex:4;
text-align:center;
}
#auth_menu{
flex:3;
text-align:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul id="main_menu">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
</ul>
<ul id="header_numbers">
<li>menu item 1</li>
<li>menu item 2</li>
</ul>
<ul id="auth_menu">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
</ul>
</div>
关于javascript - CSS/JS/Jquery - 响应屏幕尺寸的 Flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52200052/