kendoMenu 如果事先不知道菜单宽度，如何使菜单居中

Question

我有以下菜单结构（根据原始 post 编辑）：

<html class="k-webkit k-webkit40">
    <head>
        <title>Site Title</title>
            <!-- js and css files referenced here -->
    </head>
    <body>
        <link href="/PhalconEnhancedWebpages/public/ui/kendo/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
        <link href="/PhalconEnhancedWebpages/public/ui/kendo/styles/kendo.black.min.css" type="text/css" rel="stylesheet">
        <script src="/PhalconEnhancedWebpages/public/ui/kendo/js/jquery.min.js" type="text/javascript"></script>
        <script src="/PhalconEnhancedWebpages/public/ui/kendo/js/kendo.all.min.js" type="text/javascript"></script>

        <div id="divAll" class="AllContent">
            <div id="divHeaderAll">
                <div id="divHeaderContentAll" style="position:relative;width:100%;height:140px;background-color:#555555;">
                    <div id="divHeaderTop" style="position:absolute;left:0px;right:0px;top:0px;height:20px;background-color:#666666;text-align:center;">
                        This is the greeting bar
                    </div>
                    <div id="divHeaderMiddle" style="position:absolute;left:0px;right:0px;top:20px;height:100px;background-color:#777777;">
                        <div id="divCompanyLogo" style="position:absolute;left:0px;top:0px;width:180px;height:100px;">
                            Company<br/>Logo<br/>
                        </div>
                        <div id="divMenuHolder" style="position:absolute;left:180px;right:180px;top:0px;height:100px;text-align:middle;vertical-align:bottom;">
                            <div id="divMenuContentHolder">
                                <div id="menuContainer">
                                    <ul id="menuUL" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
                                        <li class="k-item k-state-default k-first" role="menuitem">
                                            <a href="/PhalconEnhancedWebpages/home/home" class="k-link">Home</a>
                                        </li>
                                        <li class="k-item k-state-default" role="menuitem">
                                            <a href="/PhalconEnhancedWebpages/map/map" class="k-link">Map</a>
                                        </li>
                                        <li class="k-item k-state-default" role="menuitem">
                                            <span class="k-link">
                                                Advanced
                                                <span class="k-icon k-i-arrow-s"></span>
                                            </span>
                                            <ul class="k-group" role="menu" aria-hidden="true">
                                                <li class="k-item k-state-default k-first" role="menuitem">
                                                    <span class="k-link">
                                                        Information
                                                        <span class="k-icon k-i-arrow-e"></span>
                                                    </span>
                                                    <ul class="k-group" role="menu" aria-hidden="true">
                                                        <li class="k-item k-state-default k-first" role="menuitem">
                                                            <a href="javascript:void(0)" onclick="redirectToRootSite('http://localhost:9191/src/html/Basic.html?folder=information&amp;page=device');" class="k-link">
                                                                Individual Devices
                                                            </a>
                                                        </li>
                                                        <li class="k-item k-state-default" role="menuitem">
                                                            <a href="javascript:void(0)" onclick="redirectToRootSite('http://localhost:9191/src/html/Basic.html?folder=information&amp;page=listen');" class="k-link">              Receive&nbsp;Site&nbsp;Assignments
                                                            </a>
                                                    </ul>
                                       ......... REST OF MENU OMITTED FOR BREVITY
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="divCustomerLogo" style="position:absolute;right:0px;width:180px;height:100px;">
                            Customer<br/>Logo<br/>
                        </div>
                    </div>
                    <div id="divHeaderBottom" style="position:absolute;left:0px;right:0px;bottom:0px;height:20px;background-color:#ff2211;text-align:center;">
                        This is the Alerts Bar
                    </div>
                </div>
            </div>
            <div id="divContentAll">
                <div id="divMainContent" style="width:100%;display:table;">
                ... THE REST IS NON HEADER/MENU RELATED CONTENT AND IS OMITTED FOR BREVITY
            </div>
        </div>
    </body>
</html>

这里是管理 "menuUL" 元素的 javascript：

$(document).ready(function(){
   $("#menuUL").kendoMenu();
   // This is using the "black" theme, so the look and feel of the menu is derived from there.
});

这里是管理 "menuUL" 元素父元素的 css（有些项目在整个过程中都被注释掉了，因为我在玩不同的排列）：

/*User Agent Stylesheet  (using google chrome in this case)*/
div{
    display:block;
}

.AllContent {
    font-family: Arial;
    color: white;
}

#divHeaderAll {
    width: 100%;
    height: 140px;
    background-color: #dddddd;
    position: absolute;
    top: 0px;
    left: 0px;
}


#divMenuContentHolder {
    margin: 0 auto;
    /* position: relative; */
    top: 14px;
    min-width: 800px;
    background-color: #3D3D3D;
}


#menuContainer {
    margin: 10px auto;
    padding-top: 0px;
    width: 800px;
}

UL related styles are controlled by the usage of the "kendoMenu" function (kendo.all.min.js -- Kendo UI Complete v2013.3.1324 free version) and the "black" theme (kendo.black.min.css)

这导致菜单区域从 "divMenuContentHolder" 的左向右延伸，即使实际的菜单项仅占用该宽度的一小部分，如下图所示：

需要做些什么才能使菜单区域仅占据其项目的宽度，并在 menuConainer 和 divMenuContentHolder 中居中，如下图所示？

有什么建议吗？

编辑： 还有一个名为 "divMenuHolder" 的父级，上面设置了一些内联样式。我在下面编辑了我的代码以反映这一点。

EDIT2: 添加了所有相关的 HTML 和 CSS.

Answer 1

你的菜单起作用的原因是，

菜单的宽度在CSS中设置为800px。所以那一定是已删除。
默认显示属性是块。因此它总是需要 100% 的宽度。所以#menuUL 必须设置为 "inline-block" 以便它只占用现有内容的宽度。
父级 pf #menuUL 必须使用 "text-align:center" 居中对齐，以便菜单位于中间。

$(document).ready(function(){
   $("#menu").kendoMenu();
   // This is using the "black" theme, so the look and feel of the menu is derived from there.
});

#menu-wrapper {
    text-align: center;
}

#menu {
    display: inline-block;
    text-align: left;
}

<html class="k-webkit k-webkit40">
    <head>
        <title>Site Title</title>
        <link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
        <link href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.black.min.css" type="text/css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="menu-wrapper">
        <ul id="menu">
            <li>
                Products
                <ul>
                    <li>
                        Furniture
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Tables & Chairs</li>
                            <li>Sofas</li>
                            <li>Occasional Furniture</li>
                            <li>Children's Furniture</li>
                            <li>Beds</li>
                        </ul>
                    </li>
                    <li>
                        Decor
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Bed Linen</li>
                            <li>Throws</li>
                            <li>Curtains & Blinds</li>
                            <li>Rugs</li>
                            <li>Carpets</li>
                        </ul>
                    </li>
                    <li>
                        Storage
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Wall Shelving</li>
                            <li>Kids Storage</li>
                            <li>Baskets</li>
                            <li>Multimedia Storage</li>
                            <li>Floor Shelving</li>
                            <li>Toilet Roll Holders</li>
                            <li>Storage Jars</li>
                            <li>Drawers</li>
                            <li>Boxes</li>
                        </ul>
                    </li>
                    <li>
                        Lights
                        <ul>
                            <!-- moving the UL to the next line will cause an IE7 problem -->
                            <li>Ceiling</li>
                            <li>Table</li>
                            <li>Floor</li>
                            <li>Shades</li>
                            <li>Wall Lights</li>
                            <li>Spotlights</li>
                            <li>Push Light</li>
                            <li>String Lights</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                Stores
                <ul>
                    <li>
                        <div id="template" style="padding: 10px;">
                            <h2>Around the Globe</h2>
                            <ol>
                                <li>United States</li>
                                <li>Europe</li>
                                <li>Canada</li>
                                <li>Australia</li>
                            </ol>
                            <img src="../content/web/menu/map.png" alt="Stores Around the Globe" />
                            <button class="k-button">See full list</button>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                Blog
            </li>
            <li>
                Company
            </li>
            <li>
                Events
            </li>
        </ul>
        </div>
    </body>
</html>

kendoMenu 如果事先不知道菜单宽度，如何使菜单居中

kendoMenu how to center menu if menu width is not known beforehand

jquery

css

kendo-menu