html - 需要 2 个 100% 宽度的文本框，分为 2 个(50% x 50%)以及一个提交按钮

Question

我需要将 2 个文本框拉伸(stretch)到 100% 的浏览器宽度，以及一个提交按钮。所有三个都应该在一行中，我试图拉伸(stretch)它但它没有发生......有什么想法吗？

代码:

.search-input{
width:100%;
border:#CCC solid 1px;
}

<div style="float:left; width:auto; margin-right:10px;"><input name="" type="text" class="search-input" /></div>
<div style="float:left; width:auto;"><input name="" type="text" class="search-input" /></div>
<div style="float:left;"><input name="" value="submit" type="button" /></div>

Answer 1

如果你在一行中需要 3 个东西，你甚至不能有一个 width: 100%。尝试为每个文本使用 40%，为按钮使用 18%，大致如下所示:

HTML

<div>
<input type = 'text' class = 'text item'>
<input type = 'text' class = 'text item'>
<input type = 'button' id = 'button' class = 'item'>
</div>

CSS

.text{
width: 40%;
}
#button{
width: 28%;
}
.item{
display: inline-block;
}

希望有用。