CSS 菜单包装

标签 css

我正在尝试构建一个基于 CSS 的菜单。我希望它能够在浏览器调整大小时进行调整,因此我使用 float 根据需要将菜单项包装到下一行。但是,我想在末尾有一个额外的缓冲区单元格来完善菜单外观,请参见下面的示例图像(这是设计师用 photoshop 制作的图像)。

Example here

我可以设置包含的 div 的背景图像来伪造它(使用我在 http://quirksmode.org/css/clearing.html 找到的清除 float 技巧),但是我有额外的问题,因为我引用的技巧是在右侧有额外的空间说我应该将容器的宽度设置为 100%。 (见下图)

enter image description here

我在最后一项之后的额外区域也没有任何边框。那么,解决这个问题的正确方法是什么?任何人都可以建议我可以检查的任何好的在线实现吗?

谢谢!

最佳答案

您应该能够给容器一个 padding-right 并让菜单项远离右边缘。

关于CSS 菜单包装,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7871245/

相关文章:

css - 溢出 : scroll is not working in my electron app

php - 砌体 CSS 命令

javascript - 如何在 Javascript 中为每次迭代增加填充?

javascript - Slick JS 垂直,两个元素在同一行

css - 当窗口大小减小到 500px 时, slider 向左拉

javascript - 使用 Vanilla Javascript 更改基于浏览器宽度的文本框的对齐方式

html - 如何在 ionic 2 中制作高度响应屏幕?

javascript - 将第二个子导航添加到 Accordion 样式菜单

jquery - 如何让一个div容器的宽度从左边增加到右边

jquery - 使用同位素过滤列出标签