Jquery 如果事先不知道菜单宽度，如何将菜单居中
我有以下菜单结构（根据原始帖子编辑）： 下面是控制“menuUL”元素父元素的css（由于我使用了不同的排列，一些项目在整个过程中被注释掉）： 这会导致“divMenuContentHolder”的菜单区域从左向右延伸，即使实际菜单项只占该宽度的一小部分，如下图所示： 需要做些什么才能使菜单区域只占据其项目的宽度，并在MenuCanainer和divMenuContentHolder中居中，如下图所示 有什么建议吗 编辑：还有一个名为“divMenuHolder”的父级，它上面设置了一些内联样式。我编辑了下面的代码以反映这一点Jquery 如果事先不知道菜单宽度，如何将菜单居中,jquery,css,kendo-menu,Jquery,Css,Kendo Menu,我有以下菜单结构（根据原始帖子编辑）： 下面是控制“menuUL”元素父元素的css（由于我使用了不同的排列，一些项目在整个过程中被注释掉）： 这会导致“divMenuContentHolder”的菜单区域从左向右延伸，即使实际菜单项只占该宽度的一小部分，如下图所示： 需要做些什么才能使菜单区域只占据其项目的宽度，并在MenuCanainer和divMenuContentHolder中居中，如下图所示 有什么建议吗 编辑：还有一个名为“divMenuHolder”的父级，它上面设置了一些内联
EDIT2:添加了所有相关的HTML和CSS。菜单力不起作用的原因是
$（文档）.ready（函数（）{
$（“#菜单”）.kendoMenu（）；
//这是使用“黑色”主题，因此菜单的外观和感觉就是从那里衍生出来的。
});
#菜单包装器{
文本对齐：居中；
}
#菜单{
显示：内联块；
文本对齐：左对齐；
}
网站名称
-
产品
-
家具
- 桌椅
- 沙发
- 临时家具
- 儿童家具
- 床
-
装饰
- 床单
- 投掷
- 窗帘和百叶窗
- 地毯
- 地毯
-
存储
- 壁架
- 儿童储藏室
- 篮子
- 多媒体存储
- 地板架
- 卫生纸架
- 储物罐
- 抽屉
- 盒子
-
灯
- 天花板
- 桌子
- 地板
- 阴影
- 壁灯
- 聚光灯
- 推灯
- 弦灯
-
商店
-
全球各地
- 美国
- 欧洲
- 加拿大
- 澳大利亚
见完整列表
博客
单位
事件
不幸的是，这只是将整个菜单移到了左侧。它后面的深灰色条仍然保持从左到右的伸展状态，然而，菜单的完整大小确实缩小到了它的项目（耶）。我确实对我的原始帖子进行了编辑，以显示“divMenuContentHolder”的父项，以防万一它可能会影响菜单。如果你能提供更多关于你在这里所做的事情的信息，并回应OP关于这不起作用的说法，只需添加更多信息，添加“宽度：800px”，这将是一个更好的回答为了#菜单容器，将菜单放在中间，但增加了额外的不必要宽度。删除该宽度并将“display:inline block；text align:center；”添加到#menuContainer可以去除不需要的宽度，但会将菜单移到其父菜单的左侧，你可以发布你的完整代码或者给我们一个到你的开发网站的链接，这样我们可以帮助你更好地重新编辑代码来显示所有适用的HTML和CSS吗
<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&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&page=listen');" class="k-link"> Receive Site 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>
$(document).ready(function(){
$("#menuUL").kendoMenu();
// This is using the "black" theme, so the look and feel of the menu is derived from there.
});
/*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)