Question

我有一个DIV元素，其中包含<label></label>和输入文本框。

基本上，我在DIV元素上启用了jQuery .resizable（）但是当你使DIV元素比当前小时，当DIV右侧开始触摸文本框时，文本框被推到一个新行。

我尝试在resizable和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方面赶上并且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/

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

1 个答案: