为什么 <textarea> 和 <input> 元素不尊重最大宽度？答案

【问题标题】：Why don't <textarea> and <input> elements respect max-width?为什么 <textarea> 和 <input> 元素不尊重最大宽度？
【发布时间】：2019-07-21 13:42:47
【问题描述】：

以下 HTML：

<!DOCTYPE html>
<style>
span,textarea,div {
    border: 1px solid black;
    max-width: 300px;
    height: 20px;
}
</style>
<div></div><br>
<textarea></textarea><br>
<input type=text><br>

在 Chrome 和 FF 中呈现以下内容。

为什么<textarea> 和<input> 不如<div> 宽？

【问题讨论】：

这是因为div是自然块元素，另外两个是自然内联元素。你也需要给他们同样的min-width和width。

标签： html css

【解决方案1】：

大多数浏览器都尊重max-width，但INPUT 和TEXTAREA 元素通常在用户代理CSS 中默认设置宽度。您可以添加此 CSS 以获得一致的渲染效果：

input,textarea{width:100%;display:block}

【讨论】：

如果他只是放宽度并添加输入不起作用？跨度，文本区域，div，输入{边框：1px纯黑色；最大宽度：300px；高度：20px；宽度：300 像素； }
@ShadowWizard display: block 将使休息变得不必要。
@Shadow Wizard：jsfiddle 没有证明 max-width 对 textarea 或 input 元素有效：它们不会随着屏幕宽度的减小而变窄。
“INPUT 和 TEXTAREA 元素通常在用户代理 CSS 中默认设置宽度。”并不真地。如果它们在用户代理样式表中有固定的宽度值，它们将很容易通过应用width:auto 被覆盖。事实上，被替换的元素，它们使用的宽度来自另一层，它们的intrinsic widths。

【解决方案2】：

今天早上遇到了这个问题。虽然第一个答案与我有关，但我觉得有必要进一步解释：

工作演示：jsFIDDLE Demo

1) 如上所述，首先在您的 css 文件顶部将输入设置为 100% 宽度很重要：

input,textarea {
     width:100%;
     display:block }

2) 默认情况下，输入现在将扩展父 div 长度的 100%。所以如果你想实现“最大宽度”，你需要在父div中设置宽度属性。

.input-container {
     max-width: 300px; }

3) 向父 div 添加填充以在输入的右侧/左侧提供固定空间

.input-container {
     padding: 25px 25px;
     max-width: 300px; }

如果有什么不清楚的地方请告诉我。

jsFIDDLE Demo

【讨论】：

很好解释的答案！！！

【解决方案3】：

一个 div - 与任何其他块元素一样 - 通常占用 100% 的可用宽度。因为您将宽度（最大宽度）限制为 200 像素，所以 div 将有 200 像素。 <textarea> 和 <input> 是内联元素。它们仍然有一个宽度，因为每个元素都有一个默认宽度。

要解决您的问题：如果您希望 <textarea> 和 <input> 字段与您的 div 一样宽，则必须更改 width 属性，而不是 max-width 属性。省略“最大值”将使它们都一样宽。

【讨论】：

使用width 不能达到我的目标 - 我希望input 和textarea 元素随着屏幕宽度变窄而变窄。
@HorseloverFat 您需要编辑原始问题以包含该信息。
@Ally 我会说很明显我想要max-width 的行为，因为问题是关于...max-width 和max-width 甚至在标题中。
@HorseloverFat 不，您需要在问题中澄清您希望“元素随着屏幕宽度变窄而变窄”，因为鉴于您的问题，我们无法知道这一点。
@HorseloverFat max-width 可以应用于许多与窗口宽度无关的场景。示例：具有最大宽度的元素包含在通过定位或水平滚动离开屏幕的元素中。