Question

我正在开发这个主题：http://test.banglapdf.net/ 将我的导航菜单移到页面右侧。我添加了＆＃39; container_class＆＃39; =＆GT; ＆＃39;右拉＆＃39; 到我的wordpress菜单功能。但是当主题的最大宽度低于767时，菜单看起来不太好。我想将它移到页面的中心。我将.pull-right {float：none;}添加到我的响应式css文件中，但它无效。我该怎么办？这是我的菜单的CSS：

#main-nav {
    margin-top: 65px;
    float:right;
    background: #e1a221; /* Old browsers */
    background: -moz-linear-gradient(top,  #e1a221 0%, #f5c25a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1a221), color-stop(100%,#f5c25a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e1a221 0%,#f5c25a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e1a221 0%,#f5c25a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e1a221 0%,#f5c25a 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e1a221 0%,#f5c25a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1a221', endColorstr='#f5c25a',GradientType=0 ); /* IE6-9 */

}
#main-nav li {
    float: left;
    list-style: none;
    position: relative;
    padding: 0.7em 1em;
    transition: background 0.8s ease;
}
#main-nav li:hover {
    background: #e2a529;
}
#main-nav li a {
    color: #522504;
    font: italic 1em "Marko One";
    box-sizing: border-box;;
    text-align: center;
    text-decoration: none;
}
#main-nav li a:hover {
    color: #6a3107;
}

.current-menu-item, .current-page-item {
    background: #d79a1e;     
}


@media (min-width: 768px) and (max-width: 991px) {
#main-nav {
    margin-top: 65px;
}
#main-nav li a {
    font-size: 0.9em;
}
#main-nav li {
    padding: 0.4em 0.7em;
}
}

@media (max-width: 767px) {
.pull-right {
    margin: 1em auto;
    float:none;
}

}

Answer 1

首先尝试使用Firebug for Firefox等一些浏览器工具。然后你应该检查哪些规则更重要。在您的案例规则中： .pull-right { 漂浮：对！重要; } 来自bootstrap.css有！important属性，所以你的＆＃39; float：none＆＃39;规则被覆盖。

另一方面，如果你想让你的水平菜单居中，有一个非常简单的方法 - 使用： ul {text-align：center;} li {display：inline-block;}

Answer 2

在媒体查询中，您需要执行此操作：

@media (max-width: 767px) {
#main-nav {
    margin: 1em auto;
    float:none !important;
}

#main-nav li {
    float:none;
    text-align:center;}

}

您的navigation.css第63行附近的某处使媒体查询看起来像那样。

我如何集中我的菜单

2 个答案: