时间戳

首页 > 解决方案 > 如何在css中设置html输入标签宽度“fit-content”

javascript - 如何在css中设置html输入标签宽度“fit-content”

问题描述

我的 HTML 页面中有一个输入标签，如下所示。

我想制作一个输入标签宽度以适应内容和最小宽度。所以我写CSS如下。

.number-input {
  width: fit-content;
  min-width: 120px;
}
<div class="price-input">
  <input type="text" value="200001230001003002" class="number-input">
  <button class="save"></button>
</div>

是否可以调整 CSS 以使输入适合文本宽度？

我已经搜索过了，但答案使用了 javascript 函数。

请任何人帮助。

标签： javascripthtmlcss

解决方案

这是使用很少使用的单位的好时机，该单位ch相对于当前字体的“0”（零）的宽度和所使用的字体大小！然后使用 JS 使宽度等于输入的长度，ch我已经在 2 个地方完成了此操作，加载时一次，然后onkeypress在编辑时扩展。看看这里：

.number-input {
    width: fit-content;
    min-width: 120px;
}
<div class="price-input">
    <input type="text" id="mytxt" onkeypress="this.style.width = (this.value.length) + 'ch';" value="200001230001003002" class="number-input" onload="myFunction()">
    <button onload="myFunction()" class="save"></button>
</div>



<script>
function myFunction() {
  document.getElementById("mytxt").style.width = (mytxt.value.length) + 'ch';
}

window.onload = myFunction();
</script>

推荐阅读