0

我需要 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>
4

4 回答 4

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

小提琴

于 2013-05-17T12:39:14.380 回答
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>
于 2013-05-17T12:40:29.133 回答
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;
}

希望有用。

于 2013-05-17T12:38:36.253 回答
0

Width: auto不会让你到任何地方。如果你想让他们分别是 50% 和 50%，那么你需要告诉他们是 50%。这里有一个问题，如果你想让按钮包含在同一行，那么你还需要计算它的宽度。您还需要将边距、填充和边框空间计算到您的总宽度中，显然，您不能超过 100%。

我所做的是使每个 div 宽 43.5%，给第一个 div 3% 的边距，并使提交按钮宽 10%。

http://jsfiddle.net/v9Em7/

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 {浮动：左；宽度：43.5%；边距右：3% } .last { 边距：0; } . 提交 { 浮动：左；宽度：10%；}

于 2013-05-17T12:42:02.513 回答