html - 宽度百分比边框

Question

假设我想制作一个水平导航栏，有五个链接，我将宽度设置为 20%。一旦我为我的链接添加了 1px 的边框，它们就会变得大于 20%，并且最后一个链接被移到一个新行上!我怎样才能解决这个问题？

我希望 CSS 允许我做一个负填充值，这样边框实际上会在元素上方而不是围绕它，但它不允许这样做。

Answer 1

如果您需要 IE6/7 一起玩，您将需要额外的内部元素，或者您可以尝试负边距。我的建议是为您的导航使用列表，并将边框添加到链接本身，如下所示:

<ul id="nav">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

毫无疑问是 (更新: 曾经是。在 HTML5 中，您现在可以在列表周围使用 nav 元素) 最语义化的导航标记。那么你的 CSS 就是:

#nav li {
  float: left;
  width: 20%;
}

#nav li a {
  display: block;
  border: 1px solid #000;
}

或者:为了获得额外的乐趣，您可以尝试使用 CSS3 box-sizing 声明，它现在在所有现代浏览器(不是 IE6/7)中都可用，并且有一些帮助:

#nav li {
  /* Opera 8.5+ and CSS3 */
  box-sizing: border-box;
  /* Firefox 1+ */
  -moz-box-sizing: border-box;
  /* IE8 */
  -ms-box-sizing: border-box;
  /* Safari 3+ */
  -webkit-box-sizing: border-box;