响应导航栏中的HTML分词

我希望我的导航栏（

.top bar

）比现在更灵敏。当前，如果屏幕缩小太多，类

.top bar right

仅会下降到类

.menu

下方。我需要

.top bar right

来分割它自己，或者如果屏幕足够小，导航栏会一直向右推，从而产生不需要的空白，则会打断单词/换行符。同时尽可能保持

。左上栏

完好无损。我已经包括了与导航栏相关的HTML和CSS。先谢谢你

。顶栏{
填充：0.5雷姆；
}
.top bar:：之后，.top bar:：之前{
内容：''；
显示：表格；
}
.顶杆，.顶杆ul{
背景色：#333333；
}
.顶栏输入{
宽度：200px；
右边距：1rem；
}
@媒体屏幕和屏幕（最小宽度：40em）{
.左上栏{
浮动：左；
}
.右上栏{
浮动：对；
}
}
.menu>li、.menu>li>a>i、.menu>li>a>img、.menu>li>a>span{
垂直对齐：中间对齐；
}
.菜单{
保证金：0；
}
.菜单>李>a{
显示：块；
填充：0.7雷姆1雷姆；
线高：1；
}
.菜单a、.菜单按钮、.菜单输入{
页边距底部：0；
}
.menu>li>a>i、.menu>li>a>img{
显示：内联块；
右边距：0.25雷姆；
}
.菜单>李{
显示：表格单元格；
}
.menu.vertical>li{
显示：块；
}
@媒体屏幕和屏幕（最小宽度：40em）{
.菜单.中横线>直线{
显示：表格单元格
}
.菜单.中等垂直>垂直{
显示：块
}
}
@媒体屏幕和屏幕（最小宽度：64em）{
.菜单.大横线>li{
显示：表格单元格；
}
.menu.L大垂直>li{
显示：块
}
}
.菜单文本{
颜色：#FFFFFF；
线高：1；
填充：0.7雷姆1雷姆；
字号：700；
}
html{
字体系列：无衬线；
-ms文本大小调整：100%；
-webkit文本大小调整：100%；
}
正文，html{
字体大小：100%；
框大小：边框框；
}
html，正文{
身高：100%；
背景色：#ffffff；
左边距：0；
右边距：0；
页边距底部：0；
}

蓝山设计

我个人喜欢使用flexbox来处理类似的事情

把所有东西都放进移动屏幕的汉堡菜单中是个好主意

如果您最终喜欢/使用flexbox，请确保添加了前缀，而我没有将其添加到我的解决方案中

li{
列表样式：无；
颜色：白色；
填充：0；
左边距：10px；
}
李：第一个孩子{
左边距：0；
}
保险商实验室{
填充：15px；
保证金：0；
}
a{
文字装饰：无；
颜色：白色；
显示：块；
}
a:悬停{
颜色：#c9c9c9；
}
.顶栏{
背景：#333；
显示器：flex；
证明内容：之间的空间；
}
.右上栏.菜单{
显示器：flex；
}

蓝山设计

您是否可以包含一些您希望完全实现的模型？