响应式功能区导航
Responsive Ribbon Navigation
我正在开发一个响应式功能区导航栏，它是我使用 ionicons (http://ionicons.com) 创建的。
一切看起来都很棒！唯一的问题是当我将浏览器调整为较小尺寸时，功能区的右侧部分会导致出现滚动条。你可以在这里看到我在做什么：https://jsfiddle.net/gyrndofr/
我尝试使用 overflow-x:hidden，但随后除了导航栏之外的所有内容都消失了。要查看 overflow-x:hidden 只需在 fiddle css.
中取消注释 line 7
我试图保留功能，但只是隐藏溢出，这就是我尝试 overflow-x:hidden 的原因，但也许我只是将其添加到错误的元素中。
我仔细查看并做了一些调整，希望这对其他人有帮助:-)
https://jsfiddle.net/66fwcz71/
基本上，我对 #nav 容器和 #nav ul 容器都应用了最大宽度，诀窍是......而不是 #nav:before - #nav:after 和 #nav ul:before - #nav ul:after 两者，阴影和色带必须是 ul 的一部分，所以我将色带保留为 #nav:before - #nav:after，然后用我的影子创建了一个 .left 和 .right div...这样丝带就是 #nav 元素和 .left - .right是阴影。
谢谢，
乔什
我正在开发一个响应式功能区导航栏，它是我使用 ionicons (http://ionicons.com) 创建的。
一切看起来都很棒！唯一的问题是当我将浏览器调整为较小尺寸时，功能区的右侧部分会导致出现滚动条。你可以在这里看到我在做什么：https://jsfiddle.net/gyrndofr/
我尝试使用 overflow-x:hidden，但随后除了导航栏之外的所有内容都消失了。要查看 overflow-x:hidden 只需在 fiddle css.
line 7
我试图保留功能，但只是隐藏溢出，这就是我尝试 overflow-x:hidden 的原因，但也许我只是将其添加到错误的元素中。
我仔细查看并做了一些调整，希望这对其他人有帮助:-)
https://jsfiddle.net/66fwcz71/
基本上，我对 #nav 容器和 #nav ul 容器都应用了最大宽度，诀窍是......而不是 #nav:before - #nav:after 和 #nav ul:before - #nav ul:after 两者，阴影和色带必须是 ul 的一部分，所以我将色带保留为 #nav:before - #nav:after，然后用我的影子创建了一个 .left 和 .right div...这样丝带就是 #nav 元素和 .left - .right是阴影。
谢谢，
乔什