Question

这是我的情景

（页面末尾的JsFiddle Link）

我想把按钮“Home”，“Categories”，“Work”，ecc ecc放在同一个栏中。

换句话说，现在是在左侧;我想把它放在中心位置。

<nav id="menu-wrap">    
    <ul id="menu">
        <li><a href="/">Home</a></li>

        <li>
            <a href="">Categories</a>
            <ul>
                <li>
                    <a href="">CSS</a>
                    <ul>
                        <li><a href="">Item 11</a></li>

                        <li><a href="">Item 12</a></li>
                        <li><a href="">Item 13</a></li>
                        <li><a href="">Item 14</a></li>
                    </ul>               
                </li>
                <li>
                    <a href="">Graphic design</a>

                    <ul>
                        <li><a href="">Item 21</a></li>
                        <li><a href="">Item 22</a></li>
                        <li><a href="">Item 23</a></li>
                        <li><a href="">Item 24</a></li>
                    </ul>               
                </li>

                <li>
                    <a href="">Development tools</a>
                    <ul>
                        <li><a href="">Item 31</a></li>
                        <li><a href="">Item 32</a></li>
                        <li><a href="">Item 33</a></li>
                        <li><a href="">Item 34</a></li>

                    </ul>               
                </li>
                <li>
                    <a href="">Web design</a>               
                    <ul>
                        <li><a href="">Item 41</a></li>
                        <li><a href="">Item 42</a></li>
                        <li><a href="">Item 43</a></li>

                        <li><a href="">Item 44</a></li>
                    </ul>   
                </li>
            </ul>
        </li>
        <li>
            <a href="">Work</a>
            <ul>

                <li>
                    <a href="">Work 1</a>
                    <ul>
                        <li>
                            <a href="">Work 11</a>      
                            <ul>
                                <li><a href="">Work 111</a></li>
                                <li><a href="">Work 112</a></li>

                                <li><a href="">Work 113</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 12</a>
                            <ul>
                                <li><a href="">Work 121</a></li>
                                <li><a href="">Work 122</a></li>

                                <li><a href="">Work 123</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 13</a>
                            <ul>
                                <li><a href="">Work 131</a></li>
                                <li><a href="">Work 132</a></li>

                                <li><a href="">Work 133</a></li>
                            </ul>                           
                        </li>
                    </ul>                   
                </li>
                <li>
                    <a href="">Work 2</a>
                    <ul>
                        <li>

                            <a href="">Work 21</a>
                            <ul>
                                <li><a href="">Work 211</a></li>
                                <li><a href="">Work 212</a></li>
                                <li><a href="">Work 213</a></li>
                            </ul>                           
                        </li>

                        <li>
                            <a href="">Work 22</a>
                            <ul>
                                <li><a href="">Work 221</a></li>
                                <li><a href="">Work 222</a></li>
                                <li><a href="">Work 223</a></li>
                            </ul>                           
                        </li>

                        <li>
                            <a href="">Work 23</a>
                            <ul>
                                <li><a href="">Work 231</a></li>
                                <li><a href="">Work 232</a></li>
                                <li><a href="">Work 233</a></li>
                            </ul>                           
                        </li>

                    </ul>                   
                </li>
                <li>
                    <a href="">Work 3</a>
                    <ul>
                        <li>
                            <a href="">Work 31</a>
                            <ul>

                                <li><a href="">Work 311</a></li>
                                <li><a href="">Work 312</a></li>
                                <li><a href="">Work 313</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 32</a>

                            <ul>
                                <li><a href="">Work 321</a></li>
                                <li><a href="">Work 322</a></li>
                                <li><a href="">Work 323</a></li>
                            </ul>                           
                        </li>
                        <li>
                            <a href="">Work 33</a>

                            <ul>
                                <li><a href="">Work 331</a></li>
                                <li><a href="">Work 332</a></li>
                                <li><a href="">Work 333</a></li>
                            </ul>                           
                        </li>
                    </ul>                   
                </li>

            </ul>       
        </li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

http://jsfiddle.net/uHuHE/

Answer 1

只需将text-align: center;分配给#menu ul a

即可

Demo

备注：如果您希望过度使用嵌套级别文本对齐方式，则可以始终使用>选择器，例如，您想要在第1个下拉级别对齐文本，而不是简单地对齐使用

ul#menu > li {
   /* Targets main menu items */
}

ul#menu > li > ul > li > a {
   /* Targets 1st level dropdown */
}

等等......

正如您评论的那样，您希望将主菜单项置于中心位置，而不是在#menu-wrap声明的位置使用#menu {}，为#menu指定一些固定宽度，而不是使用{{ 1}}

Demo 2

中心DropDown菜单本身

1 个答案: