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

我有以下表格

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

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

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

---

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

事实上，这是因为您使用的是百分比宽度。 当div元素变得太小时，按钮将没有空间容纳在右侧，除了转到下一行外，它将没有其他选择。您可以将文本框周围div的宽度设置为300px，按钮将保留在原来的位置，但文本“域名”将被切断。

编辑： 这是问题的解决办法。我已经将表单的宽度设置为500px，将文本框的宽度设置为400px，这样就有足够的空间来写域名，并且按钮将保持嵌套状态。

---

使用提交按钮的绝对位置。

它适用于我在FF 27.0中的应用。1@KristerAndersson哦，对不起，添加了错误样式的css。现在检查并尝试使用CSS和HTML。那么，排除故障就容易多了。+1@zsaat。css的唯一目的是分离文档结构和样式。。。iMHO将首先开始这样做。使div宽度为80%，按钮宽度为16%，然后调整大小。看小提琴吧，恰恰相反。如果以像素为单位指定值，它将始终保持不变。如果使用%，它将根据窗口大小进行更改。对于响应性，在大多数情况下最好使用%。@Tilwin我不是说使用%不好，但他使用%的方式实际上会在调整页面大小时破坏页面，因为没有更多的空间来容纳按钮。如果你给按钮设置一个百分比，你会使它变形，这会造成更糟糕的效果