0

如何使菜单居中？我还想在鼠标放在菜单按钮上时改变颜色吗？谢谢你的帮助。

 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 }
4

7 回答 7

1

就像在这个示例小提琴中一样。

  1. text-align:center在 div 和列表上居中菜单display:inline-block，并将 20px 边距从 div 移动到列表。
  2. 要在悬停时更改颜色：在li和之间添加一个空格a。
于 2012-04-16T20:15:22.180 回答
1

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

或者

于 2012-04-16T20:17:28.863 回答
0

要使任何 div 居中，您必须使用绝对位置和相对位置，或者以 px、em 或英寸为单位指定宽度，然后使用另一个 div 并使用 %。你可以说得更详细点吗？？？

于 2012-04-16T20:10:06.310 回答
0

试试这个三个链接（33.3% 宽度）：示例

.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 :hover 有错字，应该是li a :hover{}
于 2012-04-16T20:29:10.733 回答
0

浮动带有自动边距的菜单。

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

于 2012-04-16T20:08:05.320 回答
0

大约一年前，我整理了一些 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 }
于 2012-04-16T20:17:33.247 回答
0

看看这个 JS Fiddle

http://jsfiddle.net/7zk8E/

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

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

它应该是div.menu li a:hover

于 2012-04-16T20:18:46.233 回答