javascript - 可调整大小的 DIV 在新行上制作文本框

Question

我有一个 DIV 元素，它有一个 <label></label>并在其中输入文本框。

基本上，我在 DIV 元素上启用了 jQuery .resizable()，但是当您使 DIV 元素小于当前尺寸时，当 DIV 右侧开始接触文本框时，文本框被推到新的一行。

我尝试在可调整大小和 DIV 上使用 min-width，但它并不完全是我预期的，因为值确实需要是标签的大小 - 当 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"
});

我也有这个，但是当 DIV 侧 catch 并且 DIV 的“右侧”接触到文本框时，它然后将其移动到标签下的新行......我想继续调整文本框的大小但停止它从换行开始:

$(".ui-resizable-e")
.mousedown(function() {
    $(window).mousemove(function() {
        isDragging = true;
        $(window).unbind("mousemove");
        var width = $('#inputBox').width();
        var parentWidth = $("#div1").offsetParent().width();
        var percent = 100*width/parentWidth+50;

        $("#inputBox").css({'width': percent + '%'});

    });
});

Answer 1

首先要回答您的问题，您可以使用以下方法来防止换行:

white-space:nowrap;

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

抱歉，如果我误解了您的请求。

HTML:

<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>

JSFiddle:http://jsfiddle.net/9xrP6/