css - 响应式功能区导航

Question

我正在开发一个响应式功能区导航栏，它是我使用 ionicons ( http://ionicons.com ) 创建的。

一切看起来都很棒!唯一的问题是当我将浏览器调整为较小尺寸时，功能区的右侧部分会导致出现滚动条。你可以在这里看到我在做什么:https://jsfiddle.net/gyrndofr/

我尝试使用 overflow-x:hidden，但随后除了导航栏之外的所有内容都消失了。要查看 overflow-x:hidden，只需在 fiddle css 中取消注释 line 7。

我试图保留功能，但只是 overflow hidden ，这就是我尝试 overflow-x:hidden 的原因，但也许我只是将其添加到错误的元素中。

Answer 1

我仔细查看并做了一些调整，希望这对其他人有帮助:-)

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 是阴影。

谢谢，
乔希