0

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

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

我尝试在可调整大小和 DIV 上使用 min-width，但它并不完全符合我的预期，因为该值确实需要是标签的大小 - 当 DIV 大小触及文本机器人时，仍然会出现此问题。

<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 + '%'});

    });
});
4

1 回答 1

0

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

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/

于 2013-10-21T15:44:13.470 回答