水平对齐文本输入并提交输入，填充所有空白的文本输入

Question

我在文本输入框的右侧有一个提交按钮，宽度为30px。

文本输入字段应动态填充所有可用空间。

完成此任务的造型是什么？

<div class="wrapper"> 
    <input type="text"> 
    <input type="submit"> 
</div> 

Answer 1

箱形大小是有原因的提交按钮上有一个边界和填充通过浏览器的默认，所以它加入到我的30PX声明。如果将padding-leftpadding-right和border-left和border-right加在一起并将其从宽度减去，则可以将其删除。 calc()是IE9 +，但这些日子不应该是个问题。这些东西非常有用。

* { 
    box-sizing: border-box; 
} 

.wrapper { 
    width: 500px 
} 

input[type="text"] { 
    width: calc(100% - 30px) 
} 

input[type="submit"] { 
    width: 30px; 
    float: right; 
} 

Answer 2

* { 
 
    box-sizing: border-box; 
 
} 
 
.input-wrapper { 
 
    padding-right: 30px; 
 
} 
 
#text { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
#submit { 
 
    width: 30px; 
 
    float: right; 
 
}

<div class="wrapper"> 
 
    <div class="input-wrapper"> 
 
    <input type="text" id="text"> 
 
    </div> 
 
    <input type="submit" id="submit"> 
 
</div>

Answer 3

尝试这个 -

*{ 
 
    box-sizing:border-box; 
 
} 
 

 
.wrapper:after{ 
 
    clear:both; 
 
    content: ""; 
 
} 
 

 
#submit{ 
 
    float:right; 
 
    width:100px; 
 
} 
 

 
#text{ 
 
    float:left; 
 
    width: calc(100% - 100px); 
 
}

<div class="wrapper"> 
 
    <input type="text" id="text"> 
 
    <input type="submit" id="submit"> 
 
</div>

Answer 4

你可以选择flexbox如果你有browser support：

.wrapper { 
 
    display: flex; 
 
} 
 

 
input[type="text"] { 
 
    flex: 1; 
 
}

<div class="wrapper"> 
 
    <input type="text"> 
 
    <input type="submit"> 
 
</div>