Question

给出以下菜单结构：

<div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="About.aspx">About Us</a></li>
        <li>
            <a href="#">Automotives</a>
            <ul>
                <li><a href="#">Masking Film</a></li>
                <li><a href="#">Promo Items</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">External Protection</a></li>
                <li><a href="#">Internal Protection</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Packaging</a>
            <ul>
                <li>
                    <a href="#">Cardboard boxes</a>
                    <ul>
                        <li><a href="#">Big Boxes</a></li>
                        <li><a href="#">Small Boxes</a></li>
                        <li><a href="#">Medium Boxes</a></li>
                    </ul>
                </li>
                <li><a href="#">Paper bags</a></li>
                <li><a href="#">Polythene bags</a></li>
                <li><a href="#">Polythene layflat tubing</a></li>
                <li><a href="#">Postall bags & packaging</a></li>
                <li><a href="#">Protective Packaging</a></li>
                <li><a href="#">Refuse sacks</a></li>
                <li><a href="#">Retail</a></li>
                <li><a href="#">Strapping</a></li>
                <li><a href="#">Tapes</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Eco Friendly</a>
            <ul>
                <li><a href="#">Recycled bags</a></li>
                <li><a href="#">Degradable bags</a></li>
                <li><a href="#">Random bags</a></li>
                <li><a href="#">Cotton bags</a></li>
                <li><a href="#">Compostable bags</a></li>
            </ul>
        </li>
        <li><a href="Design.aspx">Design Service</a></li>
        <li><a href="Contact.aspx">Contact Us</a></li>
        <li><a href="Offers.aspx">Offers</a></li>
    </ul>
    <br style="clear: left" />
</div>

所有菜单按钮看起来都很棒，但它们在容器中保持对齐。我无法弄清楚如何让它们在菜单栏中居中，这样无论浏览器窗口有多宽，它们总是处于中间位置。

相关的CSS是：

.ddsmoothmenu {
    font: bold 12px Verdana;
    background: #2773A0;
    /*background of menu bar (default state)*/
    width: 100%;
    background-image: url(../images/menuBG.jpg);
    z-index: 9999;
}

.ddsmoothmenu ul {
    z-index: 9999;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
    z-index: 9999;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #ffffff;
    color: #2d2b2b;
    text-decoration: none;
    padding: 10px 30px 10px 30px;
    font-size: 18px;
    font-family: Arial;
    font-weight: normal;
    z-index: 9999;
}

* html .ddsmoothmenu ul li a {
    /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    z-index: 9999;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    background: #2773A0;
    color: white;
    z-index: 9999;
}

.ddsmoothmenu ul li a:hover {
    background: #4FA2D2;
    /*background of menu items during onmouseover (hover state)*/;
}

    /*1st sub level menu*/
.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    /*collapse all sub menus to begin with*/
    visibility: hidden;
    z-index: 9999;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
    background: #2773A0;
    /*background of menu items (default state)*/
    z-index: 9999;
    border-right: 0px;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul {
    top: 0;
    border-right: 0px;
    z-index: 9999;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 200px;
    /*width of sub menus*/
    padding: 10px;
    margin: 0;
    border-right: 0px;
}

    /* Holly Hack for IE \*/
* html .ddsmoothmenu {
    height: 1%;
} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass {
    position: absolute;
    top: 17px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 14px;
    right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
    z-index: 89;
}

.toplevelshadow {
    /*shadow opacity. Doesn't work in IE*/
    opacity: 0.8;
    z-index:89;
    filter:alpha(opacity=80);
}

Answer 1

在这里，现在停止使用表格进行布局。这种技术属于历史的废纸箱。 Go educate yourself on why您真的不应在此处使用表格。现在就如何集中这一点。看看这个jsfiddle：http://jsfiddle.net/ezsZb/

该技术基本上是这里描述的：http://www.tightcss.com/centering/center_variable_width.htm。没什么，它是一种相当普遍的技术。

该插件的代码很可怕，所以我们只是在这里使用CSS和HTML。假设这个HTML结构：

<div id="smoothmenu1">
    <div id="wrapper">
        <ul id="innerul">
        ...
        </ul>
    </div>
    <br style="clear: left" />
</div>

使用此配置：

mainmenuid: "wrapper", //menu DIV id

并交换CSS样式：

#smoothmenu1 { /* This used to be .ddsmoothmenu */
  font: bold 12px Verdana;
  background: #414141; /*background of menu bar (default state)*/
  width: 100%;
}

#wrapper {
  position: relative;
  float: left;
  left: 50%;
}

#innerul {
  position: relative;
  left: -50%;
}

您将获得所需的结果。请参阅：http://jsbin.com/anaho/。

PS：考虑使用另一个插件。这个的代码质量非常坏，而且它不是很灵活。

Answer 2

保证金左：汽车; 余量右：汽车;

请参阅：http://www.maxdesign.com.au/articles/center/

Answer 3

打开ddsmoothmenu.js并搜索zIndex并更改

zIndex: 100-i

到

zIndex: 9999-i

另外，打开ddsmoothmenu.ccs并在前两项添加z-index:9999;。

Answer 4

丑陋但它有效：

<table width="100%" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        <table width="0%" align="center" cellpadding="0" cellspacing="0">
            <tr>
               <td align="center">
                    <div id="smoothmenu1" class="ddsmoothmenu">
                        <ul>
                            <li><a href="Default.aspx">Home</a></li>
                            <li><a href="About.aspx">About Us</a></li>
                            <asp:Literal runat="server" ID="topNav"></asp:Literal>
                        </ul>
                        <br style="clear: left" />
                    </div>
                </td>
            </tr>
        </table>
        </td>
    </tr>
</table>

将菜单对齐到页面中心

4 个答案: