0

我有一些用于导航菜单的 CSS 代码和 HTML，但我需要在页面中居中，但无论我做什么，它似乎总是向左移动。

CSS 代码：

    ul#css3menu_top,ul#css3menu_top ul {
    margin:0 auto 0 auto;
    list-style:none;
    padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
ul#css3menu_top .submenu {
    visibility:hidden;
    position:absolute;
    left:0;
    top:100%;
    opacity:0;
    -moz-transition:all 0.5s;
    -webkit-transition:opacity 0.5s;
    -o-transition:opacity 0.5s;
    -moz-box-shadow:3.5px 3.5px 5px #000000;
    -webkit-box-shadow:3.5px 3.5px 5px #000000;
    box-shadow:3.5px 3.5px 5px #000000;
    float:left;
    background-color:#EEEEEE;
    border-width:2px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-color:#FFF;
    padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
    visibility:visible;
    opacity:1;
}
ul#css3menu_top li {
    position:relative;
    display:block;
    white-space:nowrap;
    font-size:0;
    float:left;
}
ul#css3menu_top li:hover {
    z-index:1;
}
ul#css3menu_top ul .submenu {
    z-index:2;
    position:absolute;
    left:100%;
    top:0;
}
ul#css3menu_top {
    font-size:0;
    width:100%;
    z-index:999;
    position:relative;
    display:inline-block;
    zoom:1;
    padding:0 0%;
    margin:0 0%;
    *display:inline;
}
ul#css3menu_top .column {
    float:left;
}
* html ul#css3menu_top li a{
    display:inline-block;
}
ul#css3menu_top>li {
    margin:0;
    width:14%;
}
ul#css3menu_top li.toplast{
    width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
    outline-style:none;
}
ul#css3menu_top a{
    display:block;
    text-align:center;
    text-decoration:none;
    font:bold 16px Calibri;
    color:#EEEEEE;
    text-shadow:#FFF 0 0 1px;
    cursor:pointer;
    padding:10px 15px 6px 3px;
    background-color:#666666;
    background-repeat:repeat;
    background-position:0 0;
    height:20px;
}
ul#css3menu_top ul li {
    float:none;
    margin:10px 0 0;
}
ul#css3menu_top ul a {
    text-align:left;
    padding:4px;
    background-color:#EEEEEE;
    background-image:none;
    border-width:0;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    font:16px Calibri;
    color:#666666;
    text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
    background-color:#EEEEEE;
    color:#666666;
    background-position:0 100px;
    text-decoration:none;
}
ul#css3menu_top img {
    border:none;
    vertical-align:middle;
    margin-right:6px;
}
ul#css3menu_top span {
    display:block;
    overflow:visible;
    background-position:right center;
    background-repeat:no-repeat;
    padding-right:0px;
}
ul#css3menu_top ul span {
    padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
    background-color:#EEEEEE;
    background-image:none;
    color:#666666;
    text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
    padding-left: 7px;
    border-width:0;
    border-radius:4px 0 0 4px;
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
    padding-right: 7px;
    border-radius:0 4px 4px 0;
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0;
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-right-radius:4px;
}

ul#css3menu_top ul li a:hover {
    color:#F36F25;
}

@media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
@media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
@media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}


/*opera hack*/
@media only screen and (min-width:900px){
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top{
            display:table;
        }
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top>li{
            width:auto;
            float:none;
            display:table-cell;
        }
        html>/**/body noindex:-o-prefocus, html>/**/body  ul#css3menu_top li.toplast{
            width:auto;
            display:table-cell;
        }

}

HTML 代码：

    <?php $item_limit=4; ?>
<ul id="css3menu_top" class="topmenu">
<li class="topmenu"><a href="#"><span>Homepage</span></a></li>
<li class="topmenu"><a href="#"><span>About Us</span></a>
    <div class="submenu" style="width:338px;">
            <div class="column" style="width:50%">
                <ul>
                <li><a href="/login">Login</a></li>
                <li><a href="/contact">Contact Us</a></li>
                <?php
                $menu1="SELECT * from websitepages where pagetype = 'About' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
                    if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
                ?>
                </ul>
            </div>
    </div>
</li>

<li class="topmenu"><a href="#"><span>Telecoms</span></a>
    <div class="submenu" style="width:338px;">
            <div class="column" style="width:50%">
                <ul>
                <?php
                $menu1="SELECT * from websitepages where pagetype = 'Telecoms' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
                    if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
                ?>
                </ul>
            </div>
    </div>
</li>

<li class="topmenu"><a href="#"><span>I.T. Support</span></a>
    <div class="submenu" style="width:338px;">
            <div class="column" style="width:50%">
                <ul>
                <?php
                $menu1="SELECT * from websitepages where pagetype = 'I.T. Support' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
                    if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
                ?>
                </ul>
            </div>
    </div>
</li>

<li class="topmenu"><a href="#"><span>Security</span></a>
    <div class="submenu" style="width:338px;">
            <div class="column" style="width:50%">
                <ul>
                <?php
                $menu1="SELECT * from websitepages where pagetype = 'Security' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
                    if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
                ?>
                </ul>
            </div>
    </div>
</li>

<li class="topmenu"><a href="#"><span>Networking</span></a>
    <div class="submenu" style="width:338px;">
            <div class="column" style="width:50%">
                <ul>
                <?php
                $menu1="SELECT * from websitepages where pagetype = 'Networking' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
                    if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
                ?>
                </ul>
            </div>
    </div>
</li>

<li class="topmenu"><a href="#"><span>Online Shop</span></a>
    <div class="submenu" style="width:338px;">
            <div class="column" style="width:50%">
                <ul>
                <li><a href="/shop/index.php?mod=cart">Shopping Cart</a></li>
                <?php
                $menu1="SELECT * from websitepages where pagetype = 'Shop' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
                    if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
                ?>
                </ul>
            </div>
    </div>
</li>

</ul>

看到这个小提琴：http: //jsfiddle.net/charliejsford/WxJcz/

菜单后面有一个白色背景，我也需要更改它的颜色。

有什么想法我能做什么？

4

2 回答 2

1

这是修复，显示：inline-block; 将其推向左侧和边距：0 0%；没有将其对准中心。

ul#css3menu_top {
    font-size:0;
    width:100%;
    z-index:999;
    position:relative;
    display: block;
    zoom:1;
    padding:0 0%;
    margin:0 auto;
    *display:inline;
}
于 2013-03-31T17:00:18.870 回答
0

您需要将整个代码包装到一个 divcenter中，然后再包装。

实际上，要使 div 居中，您需要为其指定宽度，因此您需要指定导航菜单的宽度，然后对此菜单进行编码...

例如你决定你的菜单是width:500px

然后将整个包裹menu在 adiv中并以这种方式标记css

<div class="centermenu">
//whole menu code(html) goes here
</div>

css

.centermenu{
   position:relative;    
   width:500px;
   margin-left:auto;
   margin-right:auto;
}

希望能帮助到你。

于 2013-03-31T17:18:29.570 回答