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盒模型的工作原因，包装发生了。 100%表示100％的上下文框。因此输入字段将完全填充该行 - ＆gt;提交按钮必须换行到下一行。您可以为输入框指定宽度，例如80％，提交按钮的宽度为20％。

我猜你真正想要的是输入{width：100％ - 200px}，提交{width：200px}。使用css2是不可能的。

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％，因为我为利润留下了一点空间。）

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

3 个答案: