我需要2个文本框延伸到100%的浏览器宽度,以及一个提交按钮..这三个应该在一行中,我试图拉伸它但它没有发生......任何想法?
代码:
.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>
答案 0 :(得分:0)
如果你在一行中需要3件事,你甚至不能拥有宽度: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;
}
希望有用。
答案 1 :(得分:0)
既然您知道有多少输入,只需将它们拉伸正确的数量:
<div class="border">
<input type="text" class="line" />
<input type="text" class="line" />
<input type="submit" class="line" />
<div style="clear: both"></div>
</div>
.border {
border:1px solid red;
}
input.line {
float:left;
width:33%;
}
<强> Fiddle 强>
答案 2 :(得分:0)
试试这个
<table width="100%">
<tr>
<td width="40%"><input name="" type="text" class="search-input" /></td>
<td width="40%"><input name="" type="text" class="search-input" /></td>
<td><input name="" value="submit" type="button" /></td>
</tr>
</table>
答案 3 :(得分:0)
Width: auto
不会让你到任何地方。如果你想要它们分别为50%和50%,那么你需要告诉它们是50%。这里有一个问题,如果你想让按钮包含在同一条线上,那么你也需要计算它的宽度。您还需要计算边距,填充和边框空间到您的总宽度,显然,您不能超过100%。
我所做的是让每个div宽43.5%,给第一个div一个3%的边距,并使提交按钮10%宽。
<强> HTML:强>
<div style="float:left; width: 43.5%; margin-right:3%"><input name="" type="text" class="search-input" /></div>
<div style="float:left; width: 43.5%;"><input name="" type="text" class="search-input" /></div>
<div style="float:left; width: 10%;"><input name="" value="submit" type="button" /></div>
当然,我们始终建议尽可能避免使用内联样式。它减少了你必须编写的代码,它更容易理解,这是最佳实践。我建议这样做......
HTML:
<div class="input"><input name="" type="text" class="search-input" /></div>
<div class="input last"><input name="" type="text" class="search-input" /></div>
<div class="submit"><input name="" value="submit" type="button" /></div>
<强> CSS:强> .input {float:left;宽度:43.5%;保证金权利:3%} .last {margin:0; } .submit {float:left;宽度:10%; }