百分比边框宽度

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;