我正在开发一个响应式功能区导航栏,我使用ionicons(http://ionicons.com)创建。
一切看起来都很棒!唯一的问题是当我将浏览器调整到较小的尺寸时,功能区的右侧部分会导致滚动条出现。你可以看到我在这里工作的内容:https://jsfiddle.net/gyrndofr/
我尝试使用overflow-x:hidden
,但是导航栏以外的所有内容都会消失。要查看overflow-x:hidden
只是在小提琴css中取消注释line 7
。
我试图保留功能,但只是隐藏溢出,这就是我尝试overflow-x:hidden
的原因,但也许我只是将其添加到错误的元素中。
感谢任何帮助。
谢谢,
约什
答案 0 :(得分: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
就是影子。
谢谢,
约什