防止 <label></label> 從調整大小

Question

我有一個具有<label></label>的DIV元素，並在其中輸入了文本框。

基本上，我已經在DIV元素上啟用了jQuery .resizable（），但是當您使DIV元素的大小小於當前大小時，文本框將被推到新的一行。

如何強制<label>永遠不要小於設置的大小？

謝謝！

<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"
});

Answer 1

給它一個min-width ：

<div id='div1' style='width: 300px; min-width: 300px;'>

或者，最好：

#div1 {
    min-width: 300px;
    width: 300px;
}

Answer 2

jQuery UI的可調整大小具有minWidth屬性（ 來自docs的示例 ）：

$( "#resizable" ).resizable({
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 150,
      minWidth: 200
});

因此，您可以將maxWidthProperty設置為$("label").width() 。