3

我有两个textbox根据输入大小动态增长的输入。在这之间有一个小文本。问题是当textbox宽度增加时，它会与旁边的文本重叠。

我正在寻找一种样式，可以让我随着宽度HTML/CSS的增加将文本推到右侧。textbox

任何帮助是极大的赞赏。谢谢

添加我的一些代码。

.dynamic-push {
  float: left;
}
<div class="row dynamic-push">
  <div class="two columns dynamic-push ">
    <input id="contact-position" class="dynamic-push" value="" type="text" placeholder="Position" data-bind="value: Person().Position, valueUpdate: 'afterkeydown', afterRender: $('#contact-position').autosizeInput()" /> at
    <input id="contact-company" value="" type="text" placeholder="Company" data-bind="value: Person().Company, valueUpdate: 'afterkeydown', afterRender: $('#contact-company').autosizeInput()" />
  </div>
</div>

有敲除元素，我使用 jqueryautosize.input.js插件动态增加输入文本框的宽度。

现在两个输入文本框之间的“at”随着第一个文本框的增长而被第一个重叠textbox。希望你能弄清楚这里出了什么问题。如果您需要任何其他CSS代码，我也会分享这些

4

3 回答 3

1

为什么不简单地将它们漂浮在容器中：

ONLINE DEMO

（演示包含放大文本框的动画）

HTML：

<div>
    <input><div>Box 1</div<div>Box 2</div
</div>

CSS：

div > input,
div > div {
    float:left;
}

（当然交换 div 与适当的类）。

更新

感谢 OP 提供更多代码。

但是，正如您在这个修改过的小提琴中看到的那样：http:
//jsfiddle.net/AbdiasSoftware/LxByQ/2/

问题不在 DOM 级别，因为盒子按预期推动和移动。

问题很可能出在处理字符等的 autosizeInput 函数中。延迟可能是由它处理此问题的方式引起的。由于没有显示它的代码，因此很难找到确切的原因，但这是您首先要查看的地方。

于 2013-07-19T00:44:17.040 回答
0

确保它们的位置不是绝对的，并且可能将您的元素放入同一行的表格的单元格中；您可以在不设置容器宽度的情况下将表格放置在 html 中。

<table>
    <tr>
        <td> <input type="text" /> </td>
        <td> <span> Generated text </span> </td>
        <td> <span> ditto </span> </td>
    </tr>
</table>

如果元素是绝对定位的，它们将相对于 z-index 相互重叠。
否则，如果为他们的容器指定宽度，将无法达到预期的结果。

于 2013-07-19T00:28:37.960 回答
0

取决于自动调整大小功能如何处理它。如果它调整了第一个输入字段的宽度，你可以试试 flexbox：

<div class="row dynamic-push">
  <div class="two columns dynamic-push mylittleflexcontainer">
    <input id="contact-position" class="dynamic-push" value="" type="text" placeholder="Position" data-bind="value: Person().Position, valueUpdate: 'afterkeydown', afterRender: $('#contact-position').autosizeInput()" />
    <span> at</span>
    <input id="contact-company" value="" type="text" placeholder="Company" data-bind="value: Person().Company, valueUpdate: 'afterkeydown', afterRender: $('#contact-company').autosizeInput()" />
  </div>
</div>

.mylittleflexcontainer {
   display: flex;
}
.mylittleflexcontainer:first-child {
   flex-grow: 1;
}
于 2020-01-13T07:28:40.240 回答