个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 03:19:39 25 4
gpt4 key购买 nike

我有以下菜单结构(从原始帖子编辑):

<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”的左向右延伸，即使实际的菜单项只占据该宽度的一小部分，如下图所示:

undesirable result

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

desired result

有什么建议吗？

编辑: 还有一个名为“divMenuHolder”的父对象，它上面设置了一些内联样式。我在下面编辑了我的代码以反射(reflect)这一点。

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

最佳答案

您的菜单发挥作用的原因是，

  1. 菜单的宽度在 CSS 中设置为 800px。所以那一定是已删除。

  2. 默认的显示属性是block。因此它总是需要 100% 的宽度。因此，#menuUL 必须设置为“inline-block”，以便它只占用现有内容的宽度。

  3. 父级 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>

关于jquery - kendoMenu 如果事先不知道菜单宽度，如何使菜单居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28100072/

25 4 0
文章推荐： javascript - 如何在特定情况下突出显示事件导航选项卡
文章推荐： node.js - ReactJs 中的 this 关键字
文章推荐： javascript - 如何以字符串形式返回 promise 的结果？
文章推荐： python - lxml: XMLSyntaxError: 不支持的版本 '2.0'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com