我有以下菜单结构（从原始帖子编辑）：
<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>
这是管理“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。