4

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

我希望 CSS 将允许我做一个负填充值,以便边框实际上是在元素上方而不是在它周围,但它不允许这样做。

4

3 回答 3

13

如果你需要 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;
于 2009-08-26T09:14:39.473 回答
2

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

于 2009-08-25T22:38:20.533 回答
2

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

于 2009-08-26T09:09:48.903 回答