如何修复响应式设计中的菜单栏

【问题标题】：How to fix Menu Bar in Responsive Design如何修复响应式设计中的菜单栏
【发布时间】：2015-11-01 00:25:01
【问题描述】：

我的菜单栏在 IE 和 Firefox 中的行为很奇怪，但在 Google Chrome 中看起来很正常

网址是http://bit.ly/1waPylP

如何修复菜单栏块以使最后一个菜单项 -- 联系我们 -- 出现在菜单块中？

感谢您的帮助。

【问题讨论】：

标签： css internet-explorer firefox menu responsive-design

【解决方案1】：

ul 标签内的元素不能排成一行。尝试减小每个 li 项目的宽度。您可以通过减少 li 标签的 padding-right 或 padding-left 来做到这一点：

custom-styles.css 第 63 行：

div#headercontainer header#masthead div nav#site-navigation div.menu-main-menu-container ul#menu-main-menu li.menu-item{
    background-image: url("../images/Dividing-line-menu.png");
    background-position: right top;
    background-repeat: no-repeat;
    height: 74px;
    margin-left: 0px;
    padding: 20px 33px 20px 24px;
}

【讨论】：

谢谢@Salar -- 我解决了这个问题。