如何在调整大小时阻止导航栏换行到第二行，比如 FB 导航栏？

Posted 2023-03-06

【中文标题】如何在调整大小时阻止导航栏换行到第二行，比如 FB 导航栏？

【英文标题】：How to stop navbar from wrapping to a second line when resized, like FB navbar?

【发布时间】：2018-01-17 05:29:57

【问题描述】：

当屏幕调整/缩小时，我的导航栏重叠/换行到第二行。这看起来很乱。我为媒体设备使用了一个切换按钮，但这并不能解决人们何时调整窗口大小的问题。

有两个网站我可以举例说明我希望通过导航栏/页面实现的目标：

https://www.facebook.com/ http://www.dailymail.co.uk/home/index.html

请注意这两个网站，当屏幕调整大小时，页面保持不变；尽管窗口缩小了，但页面上的任何内容都没有缩小。导航栏保持不变。

这是我想要实现的，但我不确定如何实现？

仅使用菜单/导航栏是否可以实现这一点？而不是让整个网站固定到位？

所有回复将不胜感激！

谢谢！

约翰。

【参考方案1】：

尝试使用display:table-cell 设置导航栏元素的样式，并且父元素应为display:table。

或者你可以选择flex。