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;

Answer 2

不，盒子模型将边框添加到总数中，因此如果需要添加特定宽度（在您的情况下为 100％），我不会混合它们，在您的对象中放置一个 div（或一些块元素）需要为 20% 并使其为100% 并带有边框。

Answer 3

-1px 边距可能有效。YMMV。