-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

メニューが 2 行に折り返されるため、CSS でメニューを中央に配置することはできません。1 行に収まるより少ない (またはより狭い) 要素でこれを行うには:

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

Menu elements are displayed block by default, and are therefore full-width. Not also that I've fixed the width of the header element, which is too narrow, by removing the .grid_11 class.

于 2013-03-12T15:29:11.403 に答える