Css Laravel如何使顶部菜单仅显示在一行中

我在Laravel 5.4下开发。有一个顶部菜单显示，如图1所示。 然而，我想菜单显示像图片2，显示在任何大小的屏幕只有一行。有什么好的解决办法吗？喜欢通过自动更改菜单字体吗

.venus菜单{
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
浮动：左；
字体系列：“开放式Sans”，无衬线；
列表样式：无；
背景：#fff；
盒影：0 1px 3px#dedede；
}

检查工作小提琴以获得相同的效果，但您必须更改css部分

注意-正如您所说，“顶部菜单仅显示一行”

工作小提琴

.navbar最小化{
保证金：5px50px 5px15px；
显示：内联块；
}
.内容{
宽度：100%；
显示器：flex；
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
浮动：左；
字体系列：“开放式Sans”，无衬线；
列表样式：无；
背景：#fff；
盒影：0 1px 3px#dedede；
}
.内容ul.维纳斯菜单{
宽度：100%；
边际：0px；
填充：0px；
列表样式：无；
左边框：1px实心#ddd；
显示器：flex；
flex-flow：行nowrap；
证明内容：周围的空间；
}
.内容ul.维纳斯-菜单li{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
柔性流：行换行；
}
.内容ul.venus-menu li a{
显示：块；
填充：10px 15px；
字体大小：15px；
文字装饰：无；
颜色：#505050；
}
.content ul.venus-menu li a:悬停{
背景：#eee；
}

检查工作小提琴以获得相同的效果，但您必须更改css部分

注意-正如您所说，“顶部菜单仅显示一行”

工作小提琴

.navbar最小化{
保证金：5px50px 5px15px；
显示：内联块；
}
.内容{
宽度：100%；
显示器：flex；
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
浮动：左；
字体系列：“开放式Sans”，无衬线；
列表样式：无；
背景：#fff；
盒影：0 1px 3px#dedede；
}
.内容ul.维纳斯菜单{
宽度：100%；
边际：0px；
填充：0px；
列表样式：无；
左边框：1px实心#ddd；
显示器：flex；
flex-flow：行nowrap；
证明内容：周围的空间；
}
.内容ul.维纳斯-菜单li{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
柔性流：行换行；
}
.内容ul.venus-menu li a{
显示：块；
填充：10px 15px；
字体大小：15px；
文字装饰：无；
颜色：#505050；
}
.content ul.venus-menu li a:悬停{
背景：#eee；
}

发布您只编写的导航的完整css

维纳斯菜单

类属性。可能无法显示包含11个菜单项的菜单，以便在所有大小屏幕分辨率上仅显示一行。可能的选择是将文本菜单项替换为图标以节省更多空间发布您编写的导航的完整css您只编写了

venus菜单

类属性。可能无法显示一个包含11个菜单项的菜单，以便在所有大小屏幕分辨率上只显示一行。可能的选择是将文本菜单项替换为图标，以节省更多空间我已尝试根据您的建议更改相关css部分，但在我的网站下似乎没有更改。我不确定这是否是由Laravel框架约束引起的。但fiddle正在按照您的要求工作，我认为这不是Laravel的问题。我已经尝试按照您的建议更改相关css部分，但在我的网站下似乎没有更改。我不确定这是否是由Laravel框架约束引起的。但是fiddle按照您的要求工作，我认为这不是Laravel的问题。