Question

我一直在尝试创建一个可以在页面中间修复的菜单。菜单宽度为1170px，高度为30px，底部为蓝线。现在....我想把它作为一个位于页面中间的菜单，其中包含页面上的其他项目。

对齐：中心似乎不起作用。我做错了什么？

<div align="center;" id="menu"> 
<ul>
        <li><a href="#">Nuestros Cursos</a>
            <ul>
                <li><a href="#">Spanish</a></li>
                <li><a href="#">English</a></li>
                <li><a href="#">French</a></li>
                <li><a href="#">German</a></li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
    <ul>
        <li><a href="#">Preparación de exámenes</a>
            <ul>
                <li><a href="#">Spanish</a></li>
                <li><a href="#">English</a></li>
                <li><a href="#">French</a></li>
                <li><a href="#">German</a></li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
    <ul>
        <li><a href="#">Estudiar en el Extranjero</a>
            <ul>
                <li><a href="#">Spanish</a></li>
                <li><a href="#">English</a></li>
                <li><a href="#">French</a></li>
                <li><a href="#">German</a></li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
    <ul>
        <li><a href="#">Quienes somos</a>
            <ul>
                <li><a href="#">Spanish</a></li>
                <li><a href="#">English</a></li>
                <li><a href="#">French</a></li>
                <li><a href="#">German</a></li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
    <ul>
        <li><a href="#">Trabaja con nosotros</a>
            <ul>
                <li><a href="#">Spanish</a></li>
                <li><a href="#">English</a></li>
                <li><a href="#">French</a></li>
                <li><a href="#">German</a></li>
</ul> <!-- end inner UL-->
</li> <!-- end main LI-->
</ul> <!-- end main UL-->
</div>

CSS

/*-----------------------new menu I am working on------------------------*/

#menu {

width:1170px;
height:30px;
text-align:center;
margin-left: auto; /*margin left es right fontosak olyan szinten hogy amit meretnek valasztok a menure...azt szepent automatikusan kozepre helyezi*/
margin-right: auto;
border-bottom:solid 3px #289dcb; /*#68bc1d szep zold szint jelent*/
border-radius: 10px 10px 0px 0px; 
-moz-border-radius: 10px 10px 0px 0px; 
-webkit-border-radius: 10px 10px 0px 0px;
}

#menu ul {
    margin:0;
    padding:0;
    line-height:30px;
    }

#menu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#3b3b3b; /*colours the menu and also the submenu background*/
    }

#menu ul li a {
    display:block;
    height:30px;
    width:200px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color: #FFF; /*colour of the text in the menu*/
    border:1px solid #000;
    }

#menu ul ul {
    position: absolute; /* this is what orders the nested links to appear in a block under the main ul*/
    visibility:hidden;
    top:32px;
    }

#menu ul li:hover ul { /* this is what makes the dropdown menu appear on hovering over it*/
    visibility:visible;
    }

#menu li:hover {
    background:#ff5454; /* main menu box changes to this color (also the submenus) on hovering over it, red in this case*/
    }

这是它的样子： Demo js Fiddle

Answer 1

您只需将以下行添加到#menu ul的css中，它就会使您的菜单居中。

    display: inline-block;

以下是jsfiddle的修改版本。

Answer 2

您实际上需要修改HTML和CSS：

关键点：

您正在向#menu添加连续列表，其中您只需要一个，每个菜单项都有子li
text-align:center需要添加到#menu和display:inline-block添加到#menu ul才能实现居中

Demo Fiddle

HTML

<div id="menu">
    <ul>
        <li><a href="#">Nuestros Cursos</a>

            <ul>
                <li><a href="#">Spanish</a>

                </li>
                <li><a href="#">English</a>

                </li>
                <li><a href="#">French</a>

                </li>
                <li><a href="#">German</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Preparación de exámenes</a>

            <ul>
                <li><a href="#">Spanish</a>

                </li>
                <li><a href="#">English</a>

                </li>
                <li><a href="#">French</a>

                </li>
                <li><a href="#">German</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Estudiar en el Extranjero</a>

            <ul>
                <li><a href="#">Spanish</a>

                </li>
                <li><a href="#">English</a>

                </li>
                <li><a href="#">French</a>

                </li>
                <li><a href="#">German</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Quienes somos</a>

            <ul>
                <li><a href="#">Spanish</a>

                </li>
                <li><a href="#">English</a>

                </li>
                <li><a href="#">French</a>

                </li>
                <li><a href="#">German</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Trabaja con nosotros</a>

            <ul>
                <li><a href="#">Spanish</a>

                </li>
                <li><a href="#">English</a>

                </li>
                <li><a href="#">French</a>

                </li>
                <li><a href="#">German</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#menu {
    text-align: center;
}
#menu ul {
    height: 30px;
    display:inline-block;
    margin: 0;
    position:relative;
    padding: 0;
    line-height: 30px;
    border-bottom: solid 3px #289dcb;
    /*#68bc1d szep zold szint jelent*/
    ;
}
#menu li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    background: #3b3b3b;
    /*colours the menu and also the submenu background*/
    ;
}
#menu a {
    display: block;
    height: 30px;
    width: 200px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #FFF;
    /*colour of the text in the menu*/
    border: 1px solid #000;
}
#menu ul ul {
    position: absolute;
    /* this is what orders the nested links to appear in a block under the main ul*/
    visibility: hidden;
    top: 32px;
    left:0;
}
#menu ul li:hover ul {
    /* this is what makes the dropdown menu appear on hovering over it*/
    visibility: visible;
}
#menu li:hover {
    background: #ff5454;
    /* main menu box changes to this color (also the submenus) on hovering over it, red in this case*/
    ;
}

Answer 3

这个CSS可以解决问题。 DEMO

我没有使用display: inline-block因为它会给你每个<li>之间的差距。

相反，我使用了display: table和display: table-cell来使其正确对齐，而且列表之间没有任何空白。

enter image description here

#menu {
width: 1170px;
height: 30px;
margin-left: auto;
margin-right: auto;
border-bottom: solid 3px #289dcb;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
display: table;
}

#menu ul {
margin: auto;
padding: 0;
line-height: 30px;
display: table-cell;
}

#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #3b3b3b;
width: 100%;
}
#menu ul li a {
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFF;
border: 1px solid #000;
}

Answer 4

替换给定的css并尝试，希望它能正常工作

#menu {
width:1170px;
height:30px;
text-align:center;
margin-left: auto; /*margin left es right fontosak olyan szinten hogy amit meretnek valasztok a menure...azt szepent automatikusan kozepre helyezi*/
margin-right: auto;
border-radius: 10px 10px 0px 0px; 
-moz-border-radius: 10px 10px 0px 0px; 
-webkit-border-radius: 10px 10px 0px 0px;
}

#menu ul {
    margin:0;
    padding:0;
    line-height:30px;
    display:inline-block;
    border-bottom:solid 3px #289dcb; /*#68bc1d szep zold szint jelent*/
    }

为什么这个菜单不会在页面中间对齐？

4 个答案:

Demo Fiddle