Fatal编程技术网
  • css/
  • Css 宽度：自动用于<；输入>；领域

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

css

Css 宽度：自动用于<；输入>；领域,css,Css,新手CSS问题。我认为width:auto对于display:block元素意味着“填充可用空间”。但是对于元素，情况似乎并非如此。例如： <body> <form style='background-color:red'> <input type='text' style='background-color:green;display:block;width:auto'> </form> </body> 那么有两个问题： 宽度：

新手CSS问题。我认为
width:auto
对于
display:block
元素意味着“填充可用空间”。但是对于
元素，情况似乎并非如此。例如：

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>
那么有两个问题：

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

  • 是否有一种方法可以实现输入字段的预期行为，即像其他块级元素一样填充可用空间

    • 谢谢

    一个
    的宽度是从它的
    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问题的有效答案（我也没有投票），我来到这个话题只是为了找到这个特别的想法。

    fieldset {
  position: relative;
}

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

    

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