如何使此表跨越 2 个元素之间空间的整个宽度？答案

【问题标题】：How can I make this table span the entire width of the space between 2 elements?如何使此表跨越 2 个元素之间空间的整个宽度？
【发布时间】：2015-11-19 18:32:15
【问题描述】：

首先，如果这个问题太简单而无法在这里提出，我想道歉，我在网页设计/开发方面非常缺乏经验。

我试图让这些链接跨越导航栏的整个宽度，同时仍然为每一侧的元素腾出空间，这两个元素都有不同的宽度。

将我的代码中任何位置的任何宽度设置为 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>

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

Equal sized table cells to fill entire width of holding table 该主题正在解决类似的问题，其想法是您必须在 css 中为 td 提供以 % 为单位的宽度。这意味着如果你有 6 列宽度将是 100%/6 但我宁愿将 div 元素用于链接而不是表格。

编辑：td 采用内部文本的宽度。为了更好地理解，请使用开发工具 (F12) 并检查表的元素（右键单击要查看其生成方式的表）并选择检查元素。您将能够看到实际上表格的宽度是 100%。只是列没有展开，因为在您的 css 中没有与此相关的内容。

【讨论】：

虽然这可能回答了这个问题，但提供有关如何和/或为什么它解决问题的附加上下文将提高答案的长期价值。
@Diana 对不起，我应该提到，我已经尝试过了，不幸的是它不起作用。
好的。您可以尝试将其添加到您的 CSS： 'div#nav-container { display: inline-block;宽度：90%； }' 这是您所拥有的布局的最佳解决方案，但请尝试看看这是否是您所期望的。

【解决方案2】：

一般来说，这种布局不推荐使用表格，但一个简单的想法是将图像移动到表格中。

<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 标签，并确保链接没有损坏（例如图片链接）

【讨论】：

我为什么不应该使用表格？我在这里看到的另一个问题是提问者试图完成类似的事情，被告知要为此使用一张桌子，因为这是他们的目的？这是我使用它的唯一原因。
你会在这里找到答案：stackoverflow.com/questions/83073/…

【解决方案3】：

这是您想要实现的目标吗？（运行sn-p查看）基本上，如果你想拥有一个包含 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>

【讨论】：

【解决方案4】：

出于 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>

【讨论】：