Css 基础5顶部栏菜单（带有图标）在两行中断裂 我使用基础5（最新的，如写作时间：V5.5.3）
我已经为每个元素设置了带有一些图标的顶栏菜单。 基本上：顶部栏菜单工作正常，除非页面宽度 大于[640px]且小于[828px] 我创建了一个屏幕截图来更好地说明问题： 我准备了一把小提琴来说明我的问题。 （） 顶栏HTML:Css 基础5顶部栏菜单（带有图标）在两行中断裂 我使用基础5（最新的，如写作时间：V5.5.3）,css,zurb-foundation-5,Css,Zurb Foundation 5,我已经为每个元素设置了带有一些图标的顶栏菜单。 基本上：顶部栏菜单工作正常，除非页面宽度 大于[640px]且小于[828px] 我创建了一个屏幕截图来更好地说明问题： 我准备了一把小提琴来说明我的问题。 （） 顶栏HTML: <div class="contain-to-grid"> <nav class="top-bar" data-topbar role="navigation" data-options="'Back'"> <ul
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1><a href="#">My super homepage</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span> Choose language</a>
<ul class="dropdown">
<li><a href="#">Language 1</a></li>
<li class="active"><a href="#">Language 2</a></li>
<li><a href="#">Language 3</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1><a href="#">My super homepage</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text"> Choose language</span></a>
<ul class="dropdown">
<li><a href="#">Language 1</a></li>
<li class="active"><a href="#">Language 2</a></li>
<li><a href="#">Language 3</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
@media only screen and (min-width: 40em) {
a.link-item-flag span.lang-text {
display: none;
}
}
@media only screen and (min-width: 46.5em) {
a.link-item-flag span.lang-text {
display: inline-block;
}
}
感谢您的时间和知识。我对您的html做了一点小小的修改，在“选择语言”文本周围添加了一个
span.lang text@media<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1><a href="#">My super homepage</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span> Choose language</a>
<ul class="dropdown">
<li><a href="#">Language 1</a></li>
<li class="active"><a href="#">Language 2</a></li>
<li><a href="#">Language 3</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1><a href="#">My super homepage</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text"> Choose language</span></a>
<ul class="dropdown">
<li><a href="#">Language 1</a></li>
<li class="active"><a href="#">Language 2</a></li>
<li><a href="#">Language 3</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
@media only screen and (min-width: 40em) {
a.link-item-flag span.lang-text {
display: none;
}
}
@media only screen and (min-width: 46.5em) {
a.link-item-flag span.lang-text {
display: inline-block;
}
}
——隐藏语言转换器（仅在大屏幕上显示）并不能提供良好的用户体验。遗憾的是，我不能接受这个问题的答案不过，我可能会尝试向媒体提问。谢谢。@Rikijs我已经用我希望更好的解决方案更新了我的答案。我使用媒体查询只隐藏语言下拉文本，从而保留图标（以及选项）。您的更新解决方案简单而优雅！我喜欢！我将此标记为我问题的解决方案。谢谢我已经更新了我的答案。如果可以，请告诉我