Css 宽度：自动用于<；输入>；领域

新手CSS问题。我认为

width:auto

对于

display:block

元素意味着“填充可用空间”。但是对于

元素，情况似乎并非如此。例如：

一个

的宽度是从它的

size

属性生成的。默认的

大小

是驱动自动宽度的因素

您可以尝试

width:100%

，如下面的示例所示

不填充宽度：

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

填充宽度：

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

尺寸越小，宽度越小：

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

更新

这是几分钟后我能做的最好的。在FF、Chrome和Safari中，它是1px，而在IE中则是完美的（问题是#^&*IE应用边框的方式与其他人不同，因此它并不一致。）

如另一个答案中所述，由于输入的“大小”属性生成的宽度不能设置为“自动”或任何类似属性，因此“宽度：自动”不起作用

有一些变通方法可以使它与长方体模型配合得很好，但据我所知没有什么了不起的

首先，您可以使用百分比设置字段中的填充，确保宽度加起来为100%，例如：

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

您可以尝试的另一种方法是使用绝对定位，将“左”和“右”设置为0。使用此标记：

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

此绝对定位将导致输入水平填充父字段集，而不考虑输入的填充或边距。然而，这样做的一个巨大缺点是，您现在必须处理字段集的高度，除非您设置它，否则字段集的高度将为0。如果您的输入都是相同的高度，这将对您有效，只需将字段集的高度设置为输入的高度

---

除此之外，还有一些JS解决方案，但我不喜欢在JS中应用基本样式。

我能想到的唯一选择是使用

宽度：100%

。如果您希望在输入字段上也有一个填充，而不仅仅是在其周围放置一个容器

标签

，请将格式移到该标签，同时也指定标签的填充。输入字段是刚性的。

“宽度：auto的确切含义有定义吗？CSS 规范对我来说似乎很模糊，但可能我错过了相关部分。”

实际上，没有人回答原海报问题的上述部分

答案如下：

只要“宽度”的值为“自动”，元素就可以具有水平方向 边距、填充和边框不超过其容器的宽度

另一方面，如果指定宽度：100%，则元素的总宽度为 宽度为其包含块的100%加上任何水平边距， 填充和边框。。。这可能是你想要的，但很可能不是

为了形象化差异，我举了一个例子：

---

这可能不是您想要的，但我的解决方法是将autowidth样式应用于包装器div，然后将您的输入设置为100%。

答案1-“response”给出了一个很好的答案/链接。简而言之，“auto”是默认值，因此它就像删除元素宽度中的任何更改一样

---

答案2-改用

宽度：100%

。它将填充父容器的100%，在本例中为“表单”。

因为

输入的
宽度
由它的
大小
属性控制，这就是我根据其内容初始化
输入的方式：

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>


谢谢。宽度：100%不是一回事。如果有边距或边框，则会溢出父框。您可以显式设置这些边距或边框以调整所需方式，例如
border:2px inset 35; eee；边距：-2px
。虽然我自己还没有测试过，但还是有一些类似的东西。谢谢史蒂夫。您还应该看看还有哪些有趣的想法。Epic解决方案通过输入字段上的css实现宽度一致，+1您可以使用将输入框大小属性设置为border box来阻止边框与容器重叠。可能重复@Phrogz是的，这是重复的。我找了，但没找到。Thx.很好的答案/链接，我建议用第三个例子“框大小：边框框”…这不是输入，因为自动是默认值，我不知道它有什么用处，尽管这个
#角度
特定的答案不是对OP问题的有效答案（我也没有投票），我来到这个主题就是为了找到这个特别的想法。VueJs也非常适合：

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>