Javascript 可调整大小的DIV在新行上生成文本框

我有一个DIV元素，里面有一个

和输入文本框

基本上，我已经在DIV元素上启用了jQuery.resizable（），但是当您使DIV元素小于当前值时，当DIV右侧开始接触文本框时，文本框被推到新行上

我尝试在可调整大小的和DIV上使用minwidth，但这并不是我所期望的，因为值实际上需要是标签的大小——当DIV大小触及textbot时，这个问题仍然存在

<div id='div1' style='width:300px'>
    <label>Test&nbsp;
        <input type='text' style='width:100px' id='inputBox'/>
    </label>
</div>

$("#div1").resizable({
    handles: "e, w, sw, ne, nw, se"
});

---

首先要回答您的问题，您可以使用以下方法防止包装：

white-space:nowrap;

然而，我认为您正在尝试创建一个水平的可重新调整大小的文本框？以下内容对你有用吗？通过添加一些额外的CSS，它可以调整文本框的大小，而不会拖到下一行

对不起，如果我误解了你的要求

HTML:

试验

---

JSFiddle:

太好了，非常感谢。是的，你是对的，那正是我想要的。我唯一的问题是，即使在复制代码之后，100%文本框似乎也在考虑标签大小。因此，我的句柄（和黑色边框应用）几乎出现在文本框的中间。之后呢？我看不出代码有什么不同！它就像文本框的宽度是整个div的100%，这使得它比句柄所在的位置更大。不是剩余空间的100%？

white-space:nowrap;

<div id='div1' style='width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
    <label>Test&nbsp;
        <input type='text' style='width:100%;' id='inputBox'/>
    </label>
</div>