Width: auto for < input > fields 宽度: 自动输入 < 输入 > 字段

新手 CSS 问题。我认为 width:auto对于 display:block元素意味着“填充可用空间”。然而，对于 <input>元素来说，情况似乎并非如此。例如:

<body>
<form style='background:red'>
<input type='text' style='background:green; display:block; width:auto'>
</form>
</body>

那么有两个问题:

  1. width:auto的确切含义有什么定义吗？CSS 规范对我来说似乎很模糊，但也许我错过了相关的部分。

  2. 有没有一种方法可以实现我对输入字段的预期行为-即。像其他块级元素那样填充可用空间？

谢谢！

408015 次浏览
小开
最佳答案

<input>的宽度是由它的 size属性生成的。默认的 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 使用边界的方式与其他人不同，所以不一致。)

<div style='padding:30px;width:200px;background:red'>
<form action='' method='post' style='width:200px;background:blue;padding:3px'>
<input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
<br /><br />
<input size='' style='width:100%' />
</form>
</div>
小开

如另一个答案所述，width: auto 不起作用，因为宽度是由输入的 size 属性生成的，不能设置为“ auto”或任何类似的属性。

您可以使用一些变通方法来使它与盒子模型很好地配合，但据我所知没有什么奇妙的变通方法。

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

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

另一个你可以尝试的方法是使用绝对定位，将左右设置为0。使用以下标记:

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

这个 CSS:

fieldset {
position: relative;
}


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

这种绝对定位将导致输入水平填充父字段集，而不管输入的填充或边距如何。然而，这样做的一个巨大缺点是，您现在必须处理字段集的高度，除非您设置它，否则它将为0。如果您的输入都是相同的高度，那么只需将字段集的高度设置为输入的高度应该是多少就可以了。

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

小开

我能想到的唯一选择是使用 width:100%。如果您也希望在输入字段上有一个填充，那么只需在其周围放置一个容器 label，将格式转移到该标签，同时也指定该标签的填充。输入场是刚性的。

小开

”是否有宽度的确切定义: auto 是什么意思? CSS 规格对我来说似乎很模糊，但也许我错过了相关部分。”

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

答案是: Http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

只要 width 的值是 auto，元素就可以是水平的 边缘，填充和边界不变得比容器更宽..。

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

为了形象化这种差异，我举了一个例子: Http://www.456bereastreet.com/lab/width-auto/

小开

它可能不完全是您想要的，但是我的解决方案是将自动宽度样式应用于包装器 div，然后将您的输入设置为100% 。

小开

答案1-“响应”给出了一个很好的答案/链接。简而言之，“ auto”是默认值，所以它就像删除元素宽度的任何变化一样

回答2-使用 width: 100%代替。它将填充100% 的父容器，在这种情况下，“表单”。

小开

原答案使用角度 : 因为 input的 width是由它的 size属性控制的，这就是我 初始化和 input width如何根据它的内容:

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

更新 JavaScript (10/01/2022) : 我最初的答案是在学习 Angular 的时候。如果你需要纯的，Vanilla JavaScript 的解决方案更简单:

<input type="text" oninput="this.size = this.value.length">

或者向您的 input html 元素添加一个“ input”事件监听器，然后运行如下代码:

const myInput = document.querySelector('input');
myInput.addEventListener('input', this.typing);

(...)

typing(e) {
e.target.setAttribute('size', e.target.value.length);
}

Obs: 根据浏览器的不同，如果/当 size得到 0值时，输入可能还原到默认大小在150px 到250px 之间。在这种情况下，只需将 +1添加到 value.length:

<input type="text" oninput="this.size = this.value.length + 1">

或者:

typing(e) {
e.target.setAttribute('size', e.target.value.length + 1);
}
小开

如果您愿意包含一些 JavaScript 来解决这个问题，那么您可以得到精确的大小。这不依赖于 size或 em的宽度近似值，不依赖于任何硬编码的元素宽度，并且适用于例如不接受 size属性的 type="number"。

诀窍是让你的 input大小完全像一个具有相同内容的 span，通过实际上有一个不可见的 span具有相同的内容。

将 input放在 div中，同时放在反映 input值的 span中。给 input和 span同样的造型，给 input100% width，然后隐藏 span和绝对位置的 input坐在上面的 span。

这样，容器(也就是 input)就可以根据不可见的 span内容的视觉外观自动调整大小。

codepen screenshot

Https://codepen.io/spiffytech/pen/abwwrqo

<div id="relative-parent">
<span id="size-calibration"></span>
<input id="autosized-input" />
</div>


<style>
#relative-parent {
position: relative;
/* Have some width if the input is empty */
min-width: 1em;
/* Adjust size to match the span */
width: min-content;
}


#size-calibration {
visibility: hidden;
/* Prevent the span from wrapping the text when input value has multiple words, or collapsing multiple spaces into one */
white-space: pre;
}


#autosized-input {
position: absolute;
left: 0;
width: 100%;
}
  

#size-calibration, #autosized-input {
/* Normalize styles that the browser sets differently between spans and inputs.
Ideally, use a "CSS reset" here. */
font-family: "Arial";
padding: 0;
/* Demonstrate that this works for input with custom styles */
font-size: 24px;
}
</style>


<script>
function updateSize() {
const span = document.getElementById('size-calibration');
const input = document.getElementById('autosized-input')
span.innerText = input.value;
}
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('autosized-input');
input.oninput = updateSize;
    

// Provide some initial content
input.value = "I'm sized exactly right!"
updateSize();
})
</script>
小开

现在，使用 flex 或者 grid 更容易，它覆盖了 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#size的默认样式/行为

给你2个普通的 CSS 选项，而不需要 JavaScript 或设置宽度为100% ，并处理方块大小。

flex/flex-grow
<form style='background:red;display:flex;'>
<input type='text' style='background:green; flex-grow:1'>
</form>
grid
<form style='background:red;display:grid;'>
<input type='text' style='background:green;'>
</form>

小开

使用 JQuery

$(document).on('input', '.input-fit-width', (e) => {
$(e.currentTarget).attr('size',e.currentTarget.value.length);
})
小开

在尝试了以上所有方法并失败之后，我解决了这个问题，通过单位 em 按样式修改 width 属性:

tgt.style.width = `${(tgt.value.length + 1) / 2}em`
小开

我认为最简单的解决方案是设置父元素的宽度:

form{
width: 100%!important;
}

提交答案