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

Question

我有一個DIV元素，其中有一個<label></label>和輸入文本框裏面。

基本上，我已經在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屬性（example from the docs）：

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

所以你可以設置maxWidthProper ty至$("label").width()。