调整窗口大小会导致按钮在下一行中移动

Question

我有以下表格

http://jsfiddle.net/sQY4u/2/

如果您尝试将其调整到右侧，您会注意到图像（提交按钮）正在下一行。我有宽度百分比，不明白为什么这样做。

应正确调整大小的输入文本区域具有百分比宽度。提交按钮具有固定的宽度，但也尝试使用百分比宽度，只是图像被剪切。我在div上尝试了较低的百分比

<div style="width:80%;">
  <input type="text" name="url" id="url" class="form-control" onfocus="validateonfocus()" onBlur="validateonblur()" value="Enter Domain" />
</div>

但是表单末尾和输入之间的空格太大了。关于如何克服这一点的任何想法。

Answer 1

使用绝对位置提交按钮。

Answer 2

事实上，这是因为你正在使用这种情况发生的百分比宽度 当div元素变得太小时，按钮将没有空间可以放在右边，它将没有其他选择，但转到下一行。您可以将文本框周围的div的宽度设置为300px按钮将保留在它的位置（但文本'域名'将被切断） http://jsfiddle.net/sQY4u/18/

编辑：
这是问题的解决方案。我已将表单的宽度设置为500px和400px到文本框，这将为编写域名提供足够的空间，按钮将保持嵌套状态。
http://jsfiddle.net/sQY4u/24/