在它旁边有一个浮动按钮的css文本框

Question

我正在为我的网站设计一个移动模板，我希望div中的文本框宽度为：100％，旁边有一个html提交按钮，但按钮总是显示换到第二行。有人可以帮我解决这个问题吗？

<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 box模型的运作。 100%表示上下文框的100％。所以输入字段将完全填充行 - >提交按钮必须换行到下一行。您可以为输入框指定一个宽度。 80％，提交按钮宽度为20％。

我想你真正想要做的就像输入{width：100％ - 200px}，submit {width：200px}。这是不可能的与CSS 2。

Answer 2

将div设置为position：relative;然后设置两个文本框和提交按钮的绝对位置：

div.box{ position:relative; } 

input[type="text"]{position:absolute;left:0;top:0;} 
input[type="submit"]{positon:absolute;right:0;top:0;} 

Answer 3

如果您设置文本框width: 100%;，那么它会占用全部可用空间，并且始终按提交按钮下来。

此代码指定的宽度为两个输入元素：

.form_input { 
    width: 70%; 
} 
.form_submit{ 
    width: 20%; 
} 

，他们将在同一行上。 （70％+ 20％= 90％，因为我留下了一点余地）。