Question

我有一个宽度可变的盒子，因为它取决于容器的大小。该框没有内容，因此我使用边距相对定义其宽度，但它不起作用。这是我的代码：

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  content:"";
  border-top: 2px solid red;
  margin: -20px 0 7px -7px;
  position:absolute;
  width:auto;
}

这是我的小提琴http://jsfiddle.net/x7rrj/3/

请注意红色边框如何在没有尊重右边距的情况下进入框外，如果我将宽度设置为自动，则红色边框根本不会显示。是否可以仅使用CSS来解决这个问题？

谢谢。

Answer 1

我看着小提琴，注意到顶部的红色边框没有显示出来。

它有一条填充线：0 100％; 删除该行似乎可以解决您的问题。

这是你想要的最终结果吗？

http://jsfiddle.net/z5952/

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  margin: -9px 0 7px -7px;
  position: absolute;
  width: auto;
}

Answer 2

这是你要找的东西吗？

http://jsfiddle.net/x7rrj/16/

由于您使用position:absolute来定位该行，您还可以使用top，right和left来控制位置和宽度：

.box:before {
  border-top: 2px solid red;
  content: "";

  padding: 0 100%;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}

Answer 3

好的，我找到答案归功于爱德华给我的一个想法。通过使用top，left和right替换边距来解决问题。

.box {
  background: url("back.jpg") no-repeat scroll 0 0 / cover  transparent;
  border: 4px solid black;
  box-shadow: 0 0 0 5px #826200;
  outline: 3px solid white;
  overflow:hidden;
}

.box:before {
  border-top: 2px solid white;
  content: "";
  width: auto;
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
}

CSS：用边距调整框宽度？

3 个答案: