Question

如何设置.inner类的宽度和对齐方式以匹配其父级的宽度？

可能的解决方案是：

设置box-sizing: content-box和left: -1px（边框大小）
设置left: -1px和right: -1px

但我认为这些解决方案并不完美，因为您必须知道父级的边框大小和/或您必须使用box-sizing: content-box，但我想避免这种情况。

此外，我不能只改变DOM层次结构，因为我想重新设计由JS框架生成的元素

您知道更好的解决方案吗？

*, *:before, *:after{
  box-sizing: border-box;
 }

.outer{
  border: 1px solid black;
  width: 50%;
  position: relative;
  }

.inner{
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  border: 1px solid black;
  // box-sizing: content-box;
  // left: -1px;
 }

<div class="outer">
  text
  <div class="inner">Inner</div>
</div>

Answer 1

一个选项可能是使用css3 outline property，其功能与border类似，但不会为元素添加宽度。

Answer 2

我认为最简单的解决方案是：

（所有其他设置都没有帮助 - 您拥有left: -1px;，无法将其链接到边框粗细。

＆＃13;

.outer{
  border: 1px solid black;
  width: 50%;
  position: relative;
  }

.inner{
  position: absolute;
  top: 100%;
  width: 100%;
  border: 1px solid black;
  left: -1px;
 }

＆＃13;

<div class="outer">
  text
  <div class="inner">Inner</div>
</div>

＆＃13;

Answer 3

.outer{
  border: 1px solid black;
  width: 50%;
  position: relative;
  }

.inner{
  position: relative;
  top: 100%;
  left: 0px;
  width: 100%;
  border-top: 1px solid #000;
 }

这是你在找什么？您可以使用外部div的边框，因为它已经位于底部并延伸到外部div的宽度。

您需要的只是border-top: 1px solid #000;。

将子宽度设置为父级宽度，包括边框

3 个答案: