CSS:用边距调整框宽度?

时间:2014-07-25 03:22:27

标签: css width margin box

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

.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来解决这个问题?

谢谢。

3 个答案:

答案 0 :(得分:0)

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

它有一条填充线: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;
}

答案 1 :(得分:0)

这是你要找的东西吗?

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

由于您使用position:absolute来定位该行,您还可以使用toprightleft来控制位置和宽度:

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

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

答案 2 :(得分:0)

好的,我找到答案归功于爱德华给我的一个想法。通过使用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;
}