-5

我无法将我的 CSS 菜单居中。我正在使用 impresspages，所以我的菜单生成代码只是一个 php 代码。

    .cssmenu ul{z-index:50;width:960px;background:#666 url(img/overlay.png) repeat-x 0 -110px;line-height:100%;font:normal .8em/1.4em Arial, Helvetica, sans-serif;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 0 0 rgba(0,0,0,.0);-moz-box-shadow:0 0 0 rgba(0,0,0,.0);margin:0 auto;padding:0; text-align: center;}

.cssmenu li{float:left;position:relative;list-style:none;margin:0;padding:3px 0 3px 2px;}

.cssmenu a{font-weight:700;color:#FFF;text-decoration:none;display:block;border-radius:0;-webkit-border-radius:2px;-moz-border-radius:2px;text-shadow:0 1px 1px rgba(0,0,0,.3);margin:0 10px;padding:5px;}

.cssmenu >ul>li+li{border-left:solid 1px grey;margin:0 auto;}

.cssmenu a:hover{background:#000;color:#fff;}

.cssmenu .active a,.cssmenu li:hover > a{background:#666 url(img/overlay2.png) repeat-x 0 -40px;color:#444;border-top:solid 0 #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);text-shadow:0 1px 0 rgba(255,255,255,1);}

.cssmenu ul ul li:hover a,{color:#000;}

.cssmenu li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none;}

.cssmenu ul ul a:hover{background:#000 repeat-x 0 -100px!important;color:#fff!important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,.1);}

.cssmenu ul ul{display:none;width:250px;position:absolute;top:38px;left:0;background:#fff url(img/overlay2.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);margin:0 auto;padding:0;}

.cssmenu ul ul li{float:none;margin:0 auto;padding:3px;}

.cssmenu ul ul a{font-weight:700;color:#000;letter-spacing:0;word-spacing:0;font-size:16px;text-align:center;font-family:trebuchet MS, sans-serif;line-height:1;opacity:100;}

.cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0;}

* html .cssmenu ul{height:1%;}/* CSS Document */
4

1 回答 1

0

因为您的菜单包含两行，您将无法使用 CSS 将其居中。使用适合一行的更少（或更窄）元素来执行此操作：

<header class="grid_11_REMOVED">
    <div class="cssmenu clearfix" style="width: auto;">
        <div style="background: [styles from menu]; text-align: center;">
            <ul class="level1" style="display: inline-block;">
            ...
            </ul>
        </div>
    </div>
</header>

菜单元素默认显示为块状，因此是全角的。也不是我通过删除 .grid_11 类来修复了太窄的标题元素的宽度。

于 2013-03-12T15:29:11.403 回答