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大小调整声明，现在可以在所有现代浏览器（不是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

nope，盒子模型添加了总数的边框，所以如果需要添加一个特定的宽度，我不会混合它们，在你的情况下100％，在你的对象中放一个div（或一些块元素）需要为20％，并使用边框 100％。

Answer 3

-1px的保证金可能有用。 YMMV。

百分比边框宽度

3 个答案: