Question

如何使菜单居中？当鼠标出现在菜单按钮上时，我还希望颜色发生变化吗？谢谢你的帮助。

 div.menu {
    list-style:none;
    margin:20px;
    padding:0;
    width:100% }
 div.menu ul{
    font-family: Verdana;
    font-size:14px;
    margin:0 auto;
    padding:0;}
    div.menu li{
    display:inline; }
 div.menu li a{
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#FBB117;
    color:#4C4646;
    float:left;
    text-align:center;
    border-left:1px solid #fff; }

 div.menu lia:hover{
    background:#a2b3a1;
    color:#000 }

我工作正常，但我改变了一些东西而且它不再是中心了。有点左侧。我找不到有什么不对。你能帮忙吗？

 div.menu {
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%;
    text-align:center;} 
div.menu ul{
    font-family: Verdana;
    font-size:14px;
    margin:20px;
    padding:0;
    display:inline-block;}
 div.menu li{
    display:inline;}
 div.menu li a{
    text-decoration:none;
    padding:5px 0;
    width:100px;
    background:#FBB117;
    color:#4C4646;
    float:left;
    text-align:center;
    border-left:1px solid #fff; }
 div.menu li a:hover{
    background:#a2b3a1;
    color:#000 }

Answer 1

喜欢this sample fiddle。

将div上的text-align:center菜单居中，列表中的display:inline-block居中，然后将div的20px边距移至列表中。
要在悬停时更改颜色，请在li和a之间添加空格。

Answer 2

看看这些文章。他们拥有您需要的一切：

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

OR

http://matthewjamestaylor.com/blog/centered-dropdown-menus

Answer 3

使用自动边距浮动菜单。

使用onmouseover事件更改按钮上的颜色。

Answer 4

将您必须使用位置绝对和相对的任何div居中，或者以px，em或inch指定宽度，然后使用另一个div并使用％。你能更具体一点吗？

Answer 5

我有一些CSS我在大约一年前碰到了我几乎在我工作的每个项目上都打电话...随意使用它。要使用它，您需要做的就是像这样设置列表样式：

<ul id="mylist" class="linearlist center"><li>Link or something</li></ul>

这样您就可以轻松地对齐菜单，而无需使用浮动并解决崩溃容器问题。您可以选择样式类 - 中心，左，右，分隔符，内部，外部。玩个游戏。只需确保（a）你给它一个类“linearlist”并确保HTML中没有空格是某些浏览器渲染它。

/*************************************
FLAT LIST LAYOUT

    This can be called into use using the following classes:

            required        : linearlist
            select either   : centre / left / right
            optional        : separators
            outers / inners : adds or removes outermost borders

    Example usage:

            eg 1:  <ul class="linearlist right separators">
            eg 2:  <ul class="linearlist centre separators">
            eg 3:  <ul class="linearlist left">

    Support:
            IE6 :   :first-child and :last-child pseudoclasses are not supported
                    .inners and .outers will not work
            IE7 :   :last-child pseudoclass is not supported
                    .outers will not work but .inners will
            Note browser-sniffing is required to make list items full height in IE6 and IE7

    Remember - you will need to remove whitespace between list items for true rendering.

*************************************/
ul.linearlist, .linearlist ul          {list-style-type: none; padding: 0; margin: 0;}
ul.linearlist li,.linearlist ul li     {display: inline-block; padding: 0; margin: 0;}
*ul.linearlist li,*.linearlist ul li   {display: inline !important;}
ul.linearlist li a,.linearlist ul li a {display: inline-block;}

ul.separators li,.separators ul li                         {border-left-width: 1px; border-left-style: solid;}
ul.inners li:first-child,.inners ul li:first-child {border-left-width: 0;} /* removes border from left-most list item  */
ul.outers,.outers ul {border-right-width: 1px; border-right-style: solid;} /* adds border to right-most list item  */

ul.centre,ul.center,.centre ul,.center ul {text-align: center;}
ul.left,.left ul                          {text-align: left;}
ul.right,.right ul                        {text-align: right;}

哦，是的，你的CSS中有一个小错误，它会阻止鼠标悬停时的颜色变化...你的最后一个声明应该是

div.menu li a:hover{
    background:#a2b3a1;
    color:#000 }

但是你可以稍微简化它，因为嵌套这么多的选择器是不好的做法......试试这个：

.menu a:hover{
    background:#a2b3a1;
    color:#000 }

Answer 6

看看这个JS小提琴

http://jsfiddle.net/7zk8E/

通过将text-align：center应用于外部div（您称之为类菜单），使菜单居中。我还将.menu ul显示属性更改为内联块，因为内联元素不会获得任何填充或边距。

你的悬停不起作用的原因是因为你的CSS有一个错误div.menu lia:hover

应为div.menu li a:hover

Answer 7

尝试使用三个链接（宽度为33.3％）：Example

.menu {
    list-style:none;
    margin:0 auto;
    padding:0;
    width:100%;
}

.menu ul {
    font-family:Verdana;
    font-size:14px;
    padding:0;
    width:100%;
}

.menu li {
    float:left;
    width:33.3%; 
}

.menu a {
    text-decoration:none;
    background:#FBB117;
    color:#4C4646;
    float:left;
    width:100%;
    height:100%;
    text-align:center;
    border-left:1px solid #fff; 
}

.menu a:hover {
    background:#a2b3a1;
    color:#000; 
}

您不需要在任何这些样式之前使用'div'选择器，所以我把它们拿出来。
div.menu lia ：悬停有一个错字，应该是 li a ：hover {}

如何使菜单居中？ CSS

7 个答案: