Html 如何用子元素完全填充父div？

我有一个名为

#menu

的div，宽800px。在它里面，我有8个导航链接。其中的元素应该尽可能长，并且应该具有相同的宽度，但是它们应该一起填充一行上的父div（即，没有换行）

在每个元素之间，应该有一个1px的边框（或者可能有一个1px的边距）。除当前页面链接（应用于当前链接的链接）外，所有链接的底部边框都应为

1px实心。而当前页面链接应该而不是具有可见的底部边框（以便导航选项卡与内容div“合并”）

我当前的代码几乎已经达到了我想要的效果，但是它缺少链接之间的边框/边距。。。如果我在两侧添加边框/边距，显然，当前的
12.5%
宽度（参见下面的CSS代码）会变得不准确，我无法对其进行微调，使其填充
#菜单
div跨浏览器（或者元素会溢出
#菜单
div，或者它们不会填充它-至少在一个浏览器中）

CSS:

HTML:



两项要求：


该解决方案应适用于IE6和更高版本的IE，以及最新版本的Firefox、Chrome、Safari和Opera
请不要使用JavaScript

如果：


该解决方案可以在不必重新调整元素宽度的情况下添加链接

当然，您可以完全重写CSS/HTML。不需要重复使用上面的任何代码，我只是展示我自己的方法。另外，我知道IE6不支持文本阴影规则，但这不是一项要求

它现在看起来怎么样

预期结果
嗨，我想你想要这个

像这样在样式表中添加一些
css

#menu{
font-size:0;
}
#menu a {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
#menu a + a{
border-left:solid 2px black;  // depent your design .
}


根据您的设计更改颜色或边框。
另一种方法是使用html表格而不是div

#菜单{

宽度：800px；

边框折叠：折叠；

}

#菜单td.other{

边框：1px纯黑；

}

td a{

显示：内联块；

大纲：无；

文本对齐：居中；

宽度：100%；

填充顶部：12px；

填充底部：10px；

背景图像：url（/img/menu.gif）；

颜色：#D9D9D9；

字体大小：粗体；

字体大小：13px；

字体系列：Verdana，无衬线；

文本阴影：1px 1px#505050；

}

#菜单#当前{

背景图像：url（/img/menu_current.gif）；

颜色：#505050！重要；

边框底色：#D9D9D9；

文本阴影：无；

左边框：1px纯黑；

右边框：1px纯黑；

边框顶部：1px纯黑；

边框底部：1px实心#D9D9D9；

}



不幸的是，IE6中没有显示边界。谢谢你。
  <div id="menu">
    <a href="/page1.html" id="current">Link 1</a>
    <a href="/page2.html">Link 2</a>
    <a href="/page3.html">Link 3</a>
    <a href="/page4.html">Link 4</a>
    <a href="/page5.html">Link 5</a>
    <a href="/page6.html">Link 6</a>
    <a href="/page7.html">Link 7</a>
    <a href="/page8.html">Link 8</a>
  </div>

#menu{
font-size:0;
}
#menu a {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
#menu a + a{
border-left:solid 2px black;  // depent your design .
}

<table id="menu" border="0">
<tr>
    <td id="current"><a href="/page1.html">Link 1</a></td>
    <td class="other"><a href="/page2.html">Link 2</a></td>
    <td class="other"><a href="/page3.html">Link 2</a></td>
    <td class="other"><a href="/page4.html">Link 2</a></td>
    <td class="other"><a href="/page5.html">Link 2</a></td>
    <td class="other"><a href="/page6.html">Link 2</a></td>
    <td class="other"><a href="/page7.html">Link 2</a></td>
    <td class="other"><a href="/page8.html">Link 2</a></td>
</tr>