Question

我似乎无法找到一种方法来使文本框输入控件具有动态宽度，因为我希望它能够围绕它内容展开/随着它的内容而增长，像一个div。

我尝试过显示：内联...尝试摆弄最小宽度和最大宽度...阅读各种帖子，例如Dynamic width for input text box (HTML)，但无法让它正常工作......

我希望它看起来像这样，但我想要动态调整它的宽度，我不能对宽度进行硬编码（注意9999.99和单词吨之间缺少空间）：

<div style="width:420px;background-color:red">
    Gross Weight Unit:
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    Total Gross Weight: <input style="border:0;background:transparent;width:50px" type="text" name="lname" value="9999.99"> tonnes
</div>

显示：内联不起作用（注意9999.99和单词吨之间的空格，它太大了）：

<div style="width:420px;background-color:red">
    Gross Weight Unit:
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    Total Gross Weight: <input style="border:0;background:transparent;display:inline" type="text" name="lname" value="9999.99"> tonnes
</div>

max-width没有达到预期的效果，无论它的内容如何，它都会增长到100px（注意9999.99和单词吨之间的空间，它太大了）：< / p>

<div style="width:420px;background-color:red">
      Gross Weight Unit:
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    Total Gross Weight: <input style="border:0;background:transparent;max-width:100px" type="text" name="lname" value="9999.99"> tonnes
</div>

有可能吗？如果是这样的话？

Answer 1

我认为这个JavaScript库可能有助于http://kamilkp.github.io/autoheight/

动态宽度文本框

1 个答案: