首先，如果这个问题过于简单而无法在这里提出问题，我想道歉，在网页设计/开发方面我非常缺乏经验。
我试图让这些链接跨越导航栏的整个宽度，同时仍为每侧的元素腾出空间，两者都有不同的宽度。
将我的代码中的任何宽度设置为100％并不会这样做，但是从导航栏中取出表格可以正常工作。
Here's我的代码。
header {
position: fixed;
width: 100%;
height: 2.5em;
background-color: #202020;
}
#top-spacer {
height: 2.5em;
width: 100%;
}
#logo {
width: auto;
height: 2.5em;
}
#nav-container {
display: inline-block;
max-width: 100%;
}
nav {
display: block;
width: 100%;
background-color: blue;
height: 0.5em;
vertical-align: top;
padding: 0;
margin: 0 auto;
}
nav table {
display: inline-block;
width: 100%;
}
#menu-button {
display: inline-block;
width: auto;
height: 2.5em;
float: right;
opacity: 0.3;
transition: opacity 1s;
}
#menu-button:hover {
opacity: 1;
}<html lang=en>
<head>
<meta charset="utf-8">
<meta name="Description" content="describey mcscriberson">
<meta name="keywords" content="a,b,c,d">
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<header>
<img src="img/logo.png" id="logo">
<div id="nav-container">
<nav>
<table width="100%">
<tr>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
</tr>
</table>
</nav>
</div>
<img src="img/menu.png" id="menu-button">
</header>
<div id="top-spacer"></div>
</body>
</html>
谢谢。
答案 0 :(得分：1)
这是你想要实现的目标吗？ （运行代码片段查看）
基本上，如果您想要一个包含3个不同宽度但仍填充整个宽度的元素的标题，那么您可以使用CSS将父级设置为display:table，然后将子级设置为display:table-cell。它适用于任何元素的动态宽度，无需浮动......
html, body {margin:0;padding:0}
header {
position: fixed;
width: 100%;
height: 2.5em;
background-color: #202020;
display:table;
text-align: center;
}
#top-spacer {
height: 2.5em;
width: 100%;
}
#logo {
width: auto;
height: 2.5em;
display:table-cell;
}
#nav-container {
display:table-cell;
max-width: 100%;
}
nav {
width: 100%;
height:100%;
background-color: blue;
}
nav table tr {
width: 100%;
color:#FFF;
}
nav table td {
height: 2.5em;
}
#menu-button {
width: auto;
display:table-cell;
height: 2.5em;
opacity: 0.3;
transition: opacity 1s;
}
#menu-button:hover {
opacity: 1;
display:table-cell;
background:red;
}<html lang=en>
<head>
<meta charset="utf-8">
<meta name="Description" content="describey mcscriberson">
<meta name="keywords" content="a,b,c,d">
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<header>
<img src="img/logo.png" id="logo">
<div id="nav-container">
<nav>
<table width="100%">
<tr>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
</tr>
</table>
</nav>
</div>
<img src="img/menu.png" id="menu-button">
</header>
<div id="top-spacer"> </div>
</body>
</html>
答案 1 :(得分：0)
Equal sized table cells to fill entire width of holding table 这个主题正在解决类似的问题，这个想法是你必须在css中以td为单位的宽度为％。这意味着如果你有6列宽度将是100％/ 6 但我宁愿使用div元素代替表格。
编辑：td采用内部文本的宽度。为了更好地理解，请使用开发工具（F12）并检查表的元素（右键单击要查看其生成方式的表）并选择Inspect元素。您将能够看到实际上该表的宽度为100％。只是列没有扩展，因为在你的CSS中没有任何与此相关的内容。
答案 2 :(得分：0)
通常，建议不要使用表格来进行此布局，但一个简单的想法是将图像移动到表格中。
<table width="100%">
<tr>
<td><img src="img/logo.png" id="logo"></td>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
<td>link</td>
<td><img src="img/menu.png" id="menu-button"></td>
</tr>
</table>
并将#nav-container宽度设置为width: 100%;。
此外，您应该提供一个没有任何不必要代码的示例，例如meta标记，并确保链接不会被破坏（例如图像链接）
答案 3 :(得分：0)
我做了一个小提琴，用列表项替换表，这是首选的方法，而不是SEO，响应性，可维护性原因的表。
虽然因为您需要使用％来均匀拉伸列表，但如果您的列表更改长度，则意味着调整此数字。第一个和最后一个项目（图像li项目）可能需要使用nth-child设置自己的％宽度，因为它们可能与其他列表项目不同。希望它有所帮助：
http://jsfiddle.net/43r7L2fj/1/
<header>
<div id="nav-container">
<nav>
<ul>
<li><img src="img/logo.png" id="logo"></li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li><img src="img/menu.png" id="menu-button"></li>
</ul>
</nav>
</div>