width:auto表示<input>字段
新手CSS问题.我认为width:auto一个display:block元素意味着'填充可用空间'.然而,对于一个<input>元素,情况似乎并非如此.例如:
<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>
那么两个问题:
究竟有什么宽度的定义:auto是什么意思？CSS规范对我来说似乎含糊不清,但也许我错过了相关部分.
有没有办法实现我对输入字段的预期行为 - 即.像其他块级元素一样填充可用空间吗？
谢谢!
Ben*_*Ben 77
一个<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>
UPDATE
这是几分钟后我能做的最好的事情.它在FF,Chrome和Safari中只有1个像素,在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>
- 谢谢.宽度:100%与tho不一样.如果有边距或边框,它将溢出父框. (24认同)
- 您可以使用将输入box-sizing属性设置为border-box来阻止边框与容器重叠. (10认同)
- 谢谢Steve.您还应该查看http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not,其中包含一些其他有趣的想法. (3认同)
res*_*nse 25
"究竟有什么宽度的定义:auto是什么意思？CSS规范对我来说似乎含糊不清,但也许我错过了相关部分."
没有人真正回答原始海报问题的上述部分.
这是答案:http: //www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
只要宽度值为auto,元素就可以有水平边距,填充和边框,而不会比其容器更宽......
另一方面,如果你指定宽度:100%,元素的总宽度将是其包含块的100%加上任何水平边距,填充和边框...这可能是你想要的,但很可能它不是.
为了想象差异我做了一个例子:http: //www.456bereastreet.com/lab/width-auto/
- 很好的答案/链接,我建议用第三个例子"box-sizeing:border-box"... (3认同)
Fab*_*cio 19
因为input'swidth由它的size属性控制，这就是我根据其内容初始化an 的方式input width：
<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>
- 虽然这个“#angular”的具体答案不是OP问题的有效答案（而且我没有投票），但我确实来到这个主题只是为了找到这个特殊的想法。 (9认同)
- 请注意，“size”属性仅对“email”、“password”、“tel”和“text”输入类型有效。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-size。其他输入类型必须使用 CSS `width` 进行控制 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#controlling_input_size)。 (2认同)
spi*_*ech 10
如果您愿意包含一些 JavaScript 来解决这个问题，您就可以获得精确的大小。这不依赖于使用size或ems 近似宽度，不依赖于任何硬编码元素宽度，并且适用于type="number"不接受size属性的例如 。
诀窍是通过实际具有相同内容的不可见来使您的input尺寸与具有相同内容的 a 完全相同。spanspan
将您的inputadiv与span反映inputs 值的 a 放在一起。给 和input相同span的样式，给input100% width，然后隐藏span并将 绝对位置input放在 的顶部span。
这样，容器（以及 ）input会根据不可见内容的视觉外观自动调整大小span。
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>
如另一个答案中所述,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中应用基本样式.
| 归档时间： |
|
| 查看次数： |
272116 次 |
| 最近记录： |