百分比边框宽度答案

【问题标题】：Width in percent-border百分比边框宽度
【发布时间】：2012-11-18 04:32:58
【问题描述】：

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

我希望 CSS 允许我使用负填充值，以便边框实际上位于元素上方而不是围绕它，但它不允许这样做。

【问题讨论】：

【解决方案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;

【讨论】：

【解决方案2】：

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

【讨论】：

看起来我们可能同时回答了。

【解决方案3】：

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

【讨论】：