我如何使这个表跨越两个元素之间的空间的整个宽度

首先，如果这个问题太简单，我想道歉，当涉及到网页设计/开发时，我非常缺乏经验。

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

将代码中的任何宽度设置为100%都不能做到这一点，但是将表格从导航栏中取出就可以了。

这是我的代码。

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>

谢谢。

这就是你想要达到的效果吗?(运行代码片段查看)基本上，如果你想有一个标题有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>

相同大小的表格单元格，以填充保持表的整个宽度这个主题是解决类似的问题，这个想法是，你必须有在css的宽度%为td。这意味着如果你有6列，宽度将是100%/6但是我更愿意使用div元素作为链接而不是表格。

编辑:td取内部文本的宽度。为了更好地理解，请使用开发工具(F12)并检查表的元素(右键单击您想要查看它是如何生成的)并选择inspect element。你会看到表格的宽度是100%只是列没有展开因为在css中没有相关内容

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

<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标记)的示例，并确保链接没有中断(例如图像链接)

我用列表项替换了表，这是出于SEO，响应性，可维护性原因的首选方法，而不是表。

虽然因为您需要列表均匀拉伸，使用%将意味着如果列表改变长度，则需要调整此数字。第一项和最后一项(images li items)可能需要使用n -child设置它们自己的% width，因为它们可能与其他列表项不同。希望能有所帮助:

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>

相关内容

最新更新

热门标签：