2

我有一个固定宽度的页面，我想使用 Border CSS 命令添加一个简单的边框。但是，我不希望此边框使页面膨胀并导致较小的屏幕具有水平滚动条。我对 CSS 不太熟悉，但我知道我已经研究过使用负边距来抵消边框的宽度，因为我已经做了类似的事情来为我不想移动的其他元素添加边框。但是当我在我的主容器 div 上这样做时，所有东西都会偏离中心并被砸到页面的左侧。我正在使用 Blueprint CSS 框架，我发现里面有些东西弄乱了我的边距，我发现主容器应用了“Margin: 0 auto;” 使其在页面上居中。

所以，我现在问，我怎么能在页面上应用负边距边框，同时仍然使布局在屏幕上居中？我试图将容器包装在一个 div 中并对其应用边框和负边距，但没有骰子，我尝试在容器内嵌套一个 div 并将边框应用于容器，但这也很糟糕。有人在这里扔我一根骨头！

4

1 回答 1

0

如果负边距有效，您可以通过添加具有固定宽度的包装 div 和margin: 0 auto.

在我的测试中，负边距并没有改变盒子的宽度。其他一些策略：

  1. 调整 div 的宽度以抵消边框添加的宽度。
  2. 在 div 中添加背景图片，模拟左右边框。
  3. 使用 JavaScript 检测窗口的宽度并在必要时移除边框。
  4. 添加body { overflow-x: hidden }以抑制水平滚动条。
  5. 仅当有足够空间时才使用CSS3 媒体查询添加边框（对于较旧的浏览器，可选择回退到 JavaScript（参见 #3））。

更新：您可能可以使用box-sizing:border-box而不是负边距，以便边框不会首先添加到元素的宽度。

于 2011-01-28T18:38:14.673 回答