Question

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

Answer 1

如果你在一行中需要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;
}

希望有用。

Answer 2

既然您知道有多少输入，只需将它们拉伸正确的数量：

<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

Answer 3

试试这个

<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>

Answer 4

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 {float：left;宽度：43.5％;保证金权利：3％} .last {margin：0; } .submit {float：left;宽度：10％; }

需要2个100％宽度的文本框，分为2（50％x 50％）和提交按钮

4 个答案: