Question

默认情况下，input元素的大小为size =“20”，如果没有内联定义或者CSS样式规则被归因于它。

如何将默认值设为值的实际大小？对于其他元素：

<div style="display: inline; width: auto;">
    The box will only fit the width of it's content
</div>

宽度：自动就是您所需要的。我不能放置一个定义的宽度，因为该值可能更长。例如：

<input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />

我希望#short的大小为1000（基本上大小=“4”+填充），但#long只要需要。这些输入是以编程方式进行的，所以我不能简单地在我想要的短片上写一个简短的课程，而在我想要的那个片段上放一个长课。如果可以的话，我真的很喜欢它：

input { width: auto; }

无论如何要做到这一点？

Answer 1

默认情况下，input元素是size =“20”

此“默认大小”取决于浏览器，版本和操作系统。在内联样式中无法执行此操作。

最好的解决方案是设置宽度和填充，使其最多可达100％

input {
  width: 98%;
  padding: 1%;
}

然后将其设置为绝对左右0

<fieldset>
    <input type="text" />
</fieldset>

最后添加这个css

<style type="text/css">
    fieldset {
      position: relative;
    }

    input {
        position: absolute;
        left: 0;
        right: 0;
    }
</style>

Answer 2

假设您在表单中的每一行都有自己的行，您可以将size属性设置为所需的大小，但也添加一个css：

input[type="text"] {
  max-width: 100%;
}

这可确保字段不会溢出表单。这种方法可以直观地提示短期字段的数据量（因为它们的大小合适），同时对长字段设置上限。

Answer 3

“如何将默认值设置为实际值的大小？（...）如果可以，我真的很喜欢它：输入{width：auto;} 无论如何要这样做？”

在输入HTML元素中，width由其size属性控制。这是我用来模拟{ width: auto; }的快速方法，它是浏览器的依赖证明：

<input type="text" [size]="element.value.length + 1" #element>

默认输入元素大小

3 个答案: