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

【问题标题】：kendoMenu how to center menu if menu width is not known beforehand如果事先不知道菜单宽度，kendoMenu 如何使菜单居中
【发布时间】：2015-01-22 22:47:18
【问题描述】：

我有以下菜单结构（从原始帖子编辑）：

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

【问题讨论】：

标签： jquery css kendo-menu

【解决方案1】：

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

菜单的宽度在 CSS 中设置为 800 像素。所以那一定是已删除。
的默认显示属性是块。因此它总是需要 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>

【讨论】：

不幸的是，这只是将整个菜单移到了左边。它后面的深灰色条仍然从左到右延伸，但是，菜单的完整大小确实缩小到只有其项目的大小（耶）。我确实对我的原始帖子进行了编辑以显示“divMenuContentHolder”的父级，以防它可能会影响菜单。
如果您可以提供更多关于您在此处所做的事情的信息并回应 OP 所说的这不起作用，这将是一个更好的答案
只是为了添加更多信息，将“width:800px”添加到#menuContainer 将菜单置于中心，但添加了额外的不必要的宽度。删除该宽度并添加“display:inline-block; text-align:center;” to #menuContainer 去掉了不需要的宽度，但将菜单移到其父级的左侧，并且不做任何事情来删除深灰色背景。
您能否发布您的完整代码或给我们一个指向您的开发站点的链接，以便我们可以更好地帮助您
刚刚重新编辑代码以显示所有适用的 HTML 和 CSS