旁边有一个 float 按钮的CSS文本框

Question

我正在为我的网站开发一个移动模板，我希望 div 内的文本框宽度为:100%，旁边有一个 html 提交按钮，但该按钮似乎总是换行到第二行。有人可以为此提供一些 CSS 帮助我吗？

<style type="text/css">
    .form_input {}
    .form_submit{}
</style>

<div>
    <input type="text" name="s" value="" class="form_input" />
    <input type="submit" value="Search" class="form_submit" />
</div>

Answer 1

包装的发生是因为 css 盒模型的工作原理。 100% 表示 100% 的上下文框。所以输入字段将完全填满该行 -> 提交按钮必须换行到下一行。你可以给输入框一个宽度，例如80%，提交按钮宽度为 20%。

我猜你真正想做的是输入{width: 100% - 200px }，提交{width: 200px}。这对于 css2 是不可能的。