Question

我这里有这个代码，允许你调整DIV和文本框的大小，它保持在100％。

然而，文本框进入了一个新行 - 如何将标签和文本框保持在同一行？因此，在标签周围调整DIV大小会减小文本框大小吗？

<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
    <div style="display:table-cell"><label>Test&nbsp;</label>    </div>
        <input type='text' style='width:100%;' id='inputBox'/>

</div>

$("div").resizable({
    handles: "w, sw, ne, nw, se"
});

这里的工作示例：

http://jsfiddle.net/XPUuj/1/

谢谢！

Answer 1

这是您想要的http://jsfiddle.net/xDHHM/

您的代码存在轻微的定位问题和不需要的div。

HTML：

<div class="container">
    <lable>Text</lable>
    <input type="text" />
</div>

CSS：

.container {
    width:300px;
    border:#000 dashed 1px;
    display:table-cell;
    white-space:nowrap;
    padding:10px 50px 10px 10px;
}
input {
    width:100%;
    margin-left:10px;
}

Jquery的

$(".container").resizable({
    handles: "w, sw, ne, nw, se"
});

Answer 2

删除标签周围的div：

<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
   <label>Test&nbsp;</label>
   <input type='text' style='width:100%;' id='inputBox'/>

</div>

Jsfiddle：http://jsfiddle.net/XPUuj/2/

Answer 3

您应该在div中输入

http://jsfiddle.net/XPUuj/3/

<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
    <div style="display:table-cell">$
       <label>Test&nbsp;</label>
       <input type='text' style='width:100%;' id='inputBox'/></div>
    </div>
</div>

可调整大小的div将文本框放在新行上？

3 个答案: