Question

这是我的代码：

＆＃13;

    div{
      border: 1px solid red;
      height: 20px;
    }
    span{
      display: table;
      border: 1px solid green;
      height: 10px;
      width: 100%;
      margin-left:20px;
    }

＆＃13;

<div>
  <span></span>
</div>

＆＃13;

如您所见，绿框位于右侧红框内。这是因为剩下20px边距，应用于红色框。

如何将该边距和绿框保留在红框中？

注意：我网站的大多数用户都使用旧版浏览器。所以我不想使用calc()。

Answer 1

只需删除宽度

＆＃13;

div{
  border: 1px solid red;
  height: 20px;
}
span{
  display: block;
  border: 1px solid green;
  height: 10px;
  margin-left:20px;
}

＆＃13;

<div>
  <span></span>
</div>

＆＃13;

Answer 2

删除width: 100%：

div{
  border: 1px solid red;
  height: 20px;
}
span{
  display: block;
  border: 1px solid green;
  height: 10px;
  margin-left:20px;
}

Answer 3

这有帮助吗？

＆＃13;

    div{
      border: 1px solid red;
      height: 20px;
    }
    span{
      display: block;
      border: 1px solid green;
      height: 10px;
      width: auto;
      margin-left:20px;
      margin-right:20px;
    }

＆＃13;

<div>
  <span></span>
</div>

＆＃13;

Answer 4

使用inherit;

div{
  border: 1px solid red;
  height: 20px;
}
span{
  display: block;
  border: 1px solid green;
  height: 10px;
  width: inherit;
  margin-left:20px;
}

<div>
  <span></span>
</div>

Answer 5

试试这个。

div{
  border: 1px solid red;
  height: 20px;
  padding-left: 20px;
}
span{
  display: table;
  border: 1px solid green;
  height: 10px;
  width: 100%;
}

<div>
  <span></span>
</div>

Answer 6

也许这不适合你，因为我修改的比我应该的多，但可能有用......

如果您将跨度显示为块而不是表格，并更改无流量位置的余量，则可以实现您所寻找的内容，但这可能会影响这些项目与其环境的关系。

  div {
  border: 1px solid red;
  height: 20px;
  position: relative;
}

span {
  display: block;
  border: 1px solid green;
  height: 10px;
  position: absolute;
  left:20px;
  right: 0px;
  top: 0px;
  bottom: 0px
}

<div>
  <span></span>
</div>

如何降低宽度的边距值？

6 个答案: