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: column

，默认情况下，flexbox会使这两个项目的宽度相同

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

input, div{
  border:1px solid;
  margin: 20px 30px 0px 30px;
}

input {
  display: block;
  width: calc(100% - 60px);
  padding-left: 0;
  padding-right: 0;
}

＆＃13;

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

＆＃13;

或者您可以添加包装器并将margin属性（甚至padding）设置为它：

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

Answer 2

您可以尝试object-fit: fill;

请参阅此object-fit

Answer 3

基本上，如果你完全100％完成它并为其添加边框，它将超过100％。你可以做的是添加边框插入如下：

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

input, div{
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    height: 10px;
    border: 1px solid #000;
  margin: 20px 0px;
}

见这里：https://jsfiddle.net/b5yguuaw/1/

如何将宽度的其余部分设置为输入？

3 个答案: