我想创建一个下拉菜单，其中顶级菜单项分布在页面的整个宽度上，左侧的菜单项与左侧对齐，右侧的菜单项与右侧对齐中间的元素分布在第一个和左侧菜单项之间的空白区域。
我知道如何通过固定宽度来做到这一点，例如如果有 5 个菜单项，菜单项 1 占据页面宽度的 20%。
但我需要为一项工作完成的外观需要在每个菜单项之间具有相同数量的填充，无论它们有多少个字符。菜单项的长度从 4 到 20 个字符不等。
我在考虑在 UL 上显示表格，在 LI 元素上显示表格单元格会创建我想要的外观，但它不会识别任何宽度。菜单总是和每个菜单项放在一起一样宽。如果我在每个菜单项之间添加 15 px 的填充，菜单将始终是所有菜单项的宽度加上每个菜单项之间的 15 px 填充，并且永远不会跨越整个页面。
从哪里开始设计这样的菜单？它还必须能够处理其中的许多菜单项。
编辑:
这是当前代码的示例:
https://jsfiddle.net/RenegadeMonster/hj5unsk9/4/
这里是 CSS 代码，显然我不能在没有附带代码的情况下链接到 jsfiddle。
$(document).ready(function() {
$('.navMenu > li').bind('mouseover', openSubMenu);
$('.navMenu > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').css('visibility', 'visible');
};
function closeSubMenu() {
$(this).find('ul').css('visibility', 'hidden');
};
});@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
overflow-y:scroll;
}
.wrapper {
height: 100%;
width: 100%;
margin: 0; padding: 0;
display: table;
}
.menu-wrapper {
display:table;
background:rgba(42,46,38,0.9);
width: 100%;
top: 0;
margin: 0; padding: 0;
}
.nav_menu {
margin-left:27px;
margin-right:27px;
}
.navMenu {
display: table-cell;
margin:0;
padding:0;
width:100%;
top: 0;
left: 0;
}
.navMenu ul {
display:table;
table-layout: fixed;
margin-left: -15px;
}
.navMenu li {
list-style:none;
float:left;
font:12px Arial,Helvetica,sans-serif #111;
display:table-cell;
}
.navMenu li a:link,.navMenu li a:visited {
display:table-cell;
text-decoration:none;
margin:0;
color:#dfcc9f;
font-size:18px;
display:block;
padding:15px;
}
.navMenu li a:hover {
color:#fcb713;
background-color:#262623;
}
.navMenu li a:active {
color:#dfcc9f;
border-bottom: solid 4px #262623;
}
a:active {
background-color: #FF704D;
}
/*style the sub menu*/
.navMenu li ul {
position:absolute;
visibility:hidden;
margin:0;
padding:0;
}
.navMenu li ul li {
display:inline;
float:none;
}
.navMenu li ul li a:link,.navMenu li ul li a:visited {
background:#312f2a;
/* The Fallback */
background:rgba(49,47,42,0.9);
color:#dfcc9f;
width:auto;
font-size:14px;
}
.navMenu li ul li a:hover {
background-color:#c1a373;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="menu-wrapper">
<div class="nav_menu">
<ul class="navMenu">
<li>
<a id="home" href="#">Home</a>
</li>
<li>
<a href="#">Menu Item Number 2</a>
<ul>
<li>
<a href="#">Example</a>
</li>
<li>
<a href="#">Example Menu Item 2</a>
</li>
<li>
<a href="#">Monday</a>
</li>
<li>
<a href="#">Friday</a>
</li>
<li>
<a href="#">The Weekend</a>
</li>
<li>
<a href="#">Jimmy Buffet</a>
</li>
</ul>
</li>
<li>
<a href="#">Rock Bands</a>
<ul>
<li>
<a href="#">sub menu item 1</a>
</li>
<li>
<a href="#">sub menu item 2</a>
</li>
<li>
<a href="#">sub menu item 3</a>
</li>
<li>
<a href="#">sub menu item 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Event Planner</a>
</li>
<li>
<a href="#">Contact The Who</a>
</li>
</ul>
</div>
</div>最佳答案
请检查 fiddle :https://jsfiddle.net/hj5unsk9/14/ ，我已经删除了你的表逻辑。只要您能够为菜单项提供以 % 为单位的宽度，就不需要它。
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
overflow-y:scroll;
}
.wrapper {
height: 100%;
width: 100%;
margin: 0; padding: 0;
}
.menu-wrapper {
background:rgba(42,46,38,0.9);
width: 100%;
top: 0;
margin: 0; padding: 0;
}
.nav_menu {
margin:0
}
.navMenu {
margin:0 -15px;
overflow:hidden;
width:100%;
}
.navMenu ul {
display:block;
}
.navMenu li {
list-style:none;
float:left;
font:12px Arial,Helvetica,sans-serif #111;
display:block;
box-sizing:border-box;
width:20%;
text-align:center
}
.navMenu li a:link,.navMenu li a:visited {
text-decoration:none;
margin:0;
color:#dfcc9f;
font-size:18px;
display:block;
padding:15px;
}
.navMenu li a:hover {
color:#fcb713;
background-color:#262623;
}
.navMenu li a:active {
color:#dfcc9f;
border-bottom: solid 4px #262623;
}
a:active {
background-color: #FF704D;
}
/*style the sub menu*/
.navMenu li ul {
position:absolute;
visibility:hidden;
margin:0;
padding:0;
top:72px;
}
.navMenu li ul li {
display:inline;
float:none;
}
.navMenu li ul li a:link,.navMenu li ul li a:visited {
background:#312f2a;
/* The Fallback */
background:rgba(49,47,42,0.9);
color:#dfcc9f;
width:auto;
font-size:14px;
}
.navMenu li ul li a:hover {
background-color:#c1a373;
}
关于jquery - 下拉菜单项分布在空白区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29902359/