如何集中导航？

时间：2016-06-22 12:09:10

标签： html css wordpress

我正在尝试自定义Wordpress主题的导航。

我尝试了所有东西，但导航却没有居中。我已经使用text-align: center; display: inline; display: inline-block.进行了尝试，即使使用margin: 0 auto;也似乎无效。

也许我在错误的地方应用规则？

我感谢任何帮助。

以下是HTML代码：

    <div class="menu_main">
        <div class="navbar yamm navbar-default">
            <div class="navbar-header">
                <div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span>Menu</span>
                    <button type="button"> <i class="fa fa-bars"></i></button>
                </div>
            </div>
            <div id="navbar-collapse-1" class="navbar-collapse collapse pull-right">
                <nav id="navigation">
                    <div class="menu-top-navigation-container">
                        <ul id="king-mainmenu" class="nav navbar-nav">
                            <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
                            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
                            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
                            <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
                            <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
                            <li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
         </div>
     </div>

这是CSS：

    .menu_main{
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        z-index: 9999;
    }

.navbar-default{
    margin-right: 0px !important;
}

.navbar{
    position: relative;
    margin-bottom: 0px;
    border: 0px solid transparent;
}

.navbar-header{
    float: left;
}

div#navbar-collapse-1.navbar-collapse.collapse.pull-right{
    z-index: 10000 !important;
}

.navbar-collapse.collapse{
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important
}

.pull-right{
    float: right !important;
}

nav#navigation{
    text-align: center;
}

nav{
    display: block;
}

.menu-top-navigation-container{
    float: none !important; 
    text-align: center !important;
}

.navbar-nav{
    float: none !important;
    margin: 0 auto !important;
    width: 90% !important;
}

.nav>li{
    display: inline !important;
}

.navbar-nav>li{
    float: left;
}

4 个答案:

答案 0 :(得分：1)

删除浮动表单ul和li以及text-center类navbar-collapse

＆＃13;
＆＃13; 
CSS:
.navbar-nav{
       float: none;
    }
    .navbar-nav > li {
        display: inline-block;
        float: none;
    }
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <div class="menu_main">
            <div class="navbar yamm navbar-default">
                <div class="navbar-header">
                    <div class="navbar-toggle navbar-collapse pull-right " data-toggle="collapse" data-target="#navbar-collapse-1">
                        <span>Menu</span>
                        <button type="button"> <i class="fa fa-bars"></i></button>
                    </div>
                </div>
                <div id="navbar-collapse-1" class="navbar-collapse collapse text-center">
                    <nav id="navigation">
                        <div class="menu-top-navigation-container">
                            <ul id="king-mainmenu" class="nav navbar-nav">
                                <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-18 yam-fwr"><a href="http://www.brodreneskogen.no/om-oss/">OM OSS</a></li>
                                <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-19 yam-fwr"><a href="#">VAREUTVALG</a></li>
                                <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-20 yam-fwr"><a href="http://www.brodreneskogen.no/historie/">HISTORIE</a></li>
                                <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-21 yam-fwr"><a href="#">VINBLOGG</a></li>
                                <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-22 yam-fwr"><a href="http://www.brodreneskogen.no/kontakt/">KONTAKT</a></li>
                                <li id="menu-item-209" class="menu-item menu-item-type-custom menu-item-object-custom dropdown menu-item-209 yam-fwr"><a href="#">TEST 1</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
             </div>
         </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你看看其他规则是否没有覆盖你的规则吗？

也许您可以尝试将!important放到您的规则中，看看是否有效。像这样：text-align: center !important;。它将优先考虑其他规则。

答案 2 :(得分：0)

首先从val trg = sqlContext.read.format("com.databricks.spark.csv").options(Map("path"-> {path+"/test/phonesort.csv"}, "header" -> "true")).load().toDF().repartition(1000) //10 million data val src = sqlContext.read.format("com.databricks.spark.csv").options(Map("path"-> {path+"/test/bajaj_src.csv"}, "header" -> "true")).load().toDF().sort("PHONE1").repartition(10) //1,00,000 data val srcrdd = src.rdd.map(row => { (row(1),row)}).persist() val brd = sc.broadcast(srcrdd) //BROADCASTING SAMLL DATASET val trgrdd = trg.rdd.map ( row => { (row(1),row) }) val res = trgrdd.join(brd.value) map{ case (x,(y,z)) => y.mkString("\"","\",\"","\"")+","+z.mkString("\"","\",\"" , "\"") } res.saveAsTextFile(path+"/test/1.csv") 删除pull-right，然后：

div#navbar-collapse-1

答案 3 :(得分：-1)

尝试：

ul.king-mainmenu {text-align:center;  display: table;  float: none; margin: 0 auto;}

ul.king-mainmenu > li { display: inline; float:left; }

.menu_main { float:left;width:100%;}

相关问题
最新问题