下方具有相同宽度的输入和 div 应具有对齐的垂直边框

Question

我有一个容器，下面有内部 INPUT 和 DIV (class="inner-div")。所有 3 个宽度都相同（容器的宽度 = 输入的宽度。内部 div 的宽度 = 容器的宽度（= 输入的宽度）。

我希望 inner-div 的边框与输入的边框垂直位于同一条线上。我怎样才能做到这一点？ （尝试使用边框和轮廓，没有成功）。

可能图片解释了它：Explaining Picture

这里是JSfiddle

HTML:`

<div class="container">
  <input type="text" placeholder="Your name" class="input">
  <div class="inner-container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>`

CSS

.container {
  background: purple;
  display: inline;
  position: relative;
}

.input {
  padding-right: 5px;
}

.inner-div {
  position: absolute;
  width: 100%;
  outline: 1px solid black;
}

`

Answer 1

轮廓不等于边框。

只是为了双重确认，使用box-sizing:border-box，以便在宽度计算中包含边框。

如果你想要一个边框，就用一个。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  background: purple;
  display: inline;
  position: relative;
}
.input {
  padding-right: 5px;
}
.inner-div {
  position: absolute;
  width: 100%;
  border: 1px solid black;
}

<div class="container">
  <input type="text" placeholder="Your name" class="input">
  <div class="inner-div">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>