18

输入元素默认为 size="20" 如果它没有内联定义或者一个 CSS 样式规则归于它。

你如何使默认值的实际大小？对于其他元素：

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

width: auto 就是你所需要的。我无法设置定义的宽度，因为该值可能更长。例如：

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

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

input { width: auto; }

无论如何要这样做？

4

3 回答 3

17

输入元素默认为 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>
于 2012-08-07T12:40:45.670 回答
6

“你如何使默认值的实际大小？（...）我真的很喜欢它，如果我可以输入：输入{宽度：自动;}无论如何要这样做？”

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

角度：

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

纯香草 JavaScript：

<input type="text" oninput="this.size = this.value.length + 1">
于 2018-10-02T10:13:24.530 回答
1

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

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

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

于 2017-10-18T18:43:54.397 回答