Question

我有一个内部INPUT和DIV的容器（class =＆＃34; inner-div＆＃34;）。所有3个宽度都相同（容器宽度=输入宽度。内部宽度=容器＆＃39; s（=输入宽度）。

我希望inner-div有一个垂直位于同一行的边框，作为输入的边框。我该怎么做到？（尝试使用边框和轮廓，但没有成功）。

可能是图片解释了它：Explaining Picture

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

大纲与边框不同。

只需进行双重确认，请使用Column_C，以便在宽度计算中包含边框。

如果你想要一个边框，只需使用一个。

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应该具有对齐的垂直边框

1 个答案: