Question

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

在每个元素之间，应该有1px边框（或者可能是1px边距）。除当前页面链接（应用了#current之外的任何链接）之外的所有链接都应具有1px solid #505050底部边框。虽然当前页面链接应不具有可见的底部边框（以便导航选项卡＆＃34;合并＆＃34;与内容div）。

我当前的代码几乎完全符合我的要求，但它缺少链接之间的边框/边距...如果我向边添加边框/边距，显然，当前12.5%宽度（请参阅下面的CSS代码）变得不准确，我无法对其进行微调，以便填充#menu div 跨浏览器（要么元素会溢出{ {1}} div，或者他们不会填写它 - 至少在一个浏览器中）。

CSS：

#menu

HTML：

#menu {
  border:1px solid #505050;
  border-bottom:none;
  width:800px;
}

#menu a {
  display:inline-block;
  outline:none;
  text-align:center;
  width:12.5%;
  padding-top:12px;
  padding-bottom:10px;
  background-image:url(/img/menu.gif);
  border-bottom:1px solid #505050;
  color:#D9D9D9;
  font-weight:bold;
  font-size:13px;
  font-family:Verdana, sans-serif;
  text-shadow:1px 1px #505050;
}

#menu #current {
  background-image:url(/img/menu_current.gif);
  color:#505050 !important;
  border-bottom-color:#D9D9D9;
  text-shadow:none;
}

两个要求：

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

如果：

，这是一个很大的优势

解决方案有效，因此无需重新调整元素的宽度即可添加链接

您当然可以完全重写CSS / HTML。无需重复使用上述任何代码，我只是展示自己的方法。另外，我知道IE6中不支持text-shadow规则，但这并不是必需的。

目前看起来如何 How it currently looks

预期结果 The expected result

Answer 1

嗨，我想你想要 Demo

在样式表中添加一些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 .
}

的 Live demo 的

根据您的设计
更改颜色或边框。

Answer 2

另一种方法是使用html表而不是div。

#menu {
    宽度：800像素;
    边界崩溃：崩溃;
  }

#menu td.other {
  边框：1px纯黑色;
  }
  td a {
    显示：内联块;
    概述：无;
    文本对齐：中心;
    宽度：100％;
    填充顶：12px的;
    填充底：10px的;
    背景图像：网址（/img/menu.gif）;
    颜色：＃＃000000;
    字体重量：粗体;
    字体大小：13像素;
    font-family：Verdana，sans-serif;
    text-shadow：1px 1px＃505050;
  }
  #country #current {
    背景图像：网址（/img/menu_current.gif）;
    颜色：＃505050！重要;
    底部边框颜色：＃＃000000;
    文字阴影：无;
    border-left：1px纯黑色;
    border-right：1px纯黑色;
    border-top：1px纯黑色;
    border-bottom：1px solid＃D9D9D9;
  }

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

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

2 个答案: