javascript - 如何将其余宽度设置为输入？

Question

这是我的代码:

input, div{
  border:1px solid;
  margin: 20px 30px 0px 30px;
}

<input />
<div>
something
</div>

我想要做的就是使 input 与 div 的宽度相同。

请注意 display: block; 和 width: 100%; 都不会按预期工作。

Answer 1

您可以在父元素上使用 display: flex 或者在这种情况下 body 如果您使用 flex-direction : 列

body {
  display: flex;
  flex-direction: column;
}
input, div{
  border:1px solid;
  margin: 20px 30px 0px 30px;
}

<input type="text">
<div>
something
</div>

或者您可以使用 calc 和硬编码宽度 - 输入元素的边距。

input, div{
  border:1px solid;
  margin: 20px 30px 0px 30px;
}

input {
  display: block;
  width: calc(100% - 60px);
  padding-left: 0;
  padding-right: 0;
}

<input type="text">
<div>
something
</div>

或者您可以添加一个包装器并为其设置 margin 属性(甚至 padding):

* {
  box-sizing: border-box;
}
div {
  border: 1px solid;
  margin: 20px 30px 0px 30px;
}

.input_wrapper {
  margin: 20px 30px 0px 30px;
}

input {
  border: 1px solid;
  width: 100%;
}

<div class="input_wrapper">
  <input type="text">
</div>
<div>
  something
</div>