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

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 ，在这种情况下，如果使用flex-direction: column ，默认情况下body和flexbox会使两个项目的宽度相同

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

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

或者，您可以使用calc和hardcode width-margin输入元素。

 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> 

Answer 2

您可以尝试object-fit: fill;

看到这个适合

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/