为什么没有<textarea>和<input>元素尊重最大宽度？

下面的HTML：为什么没有<textarea>和<input>元素尊重最大宽度？

<!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以下。

enter image description here

为什么不是<textarea>和<input>一样宽的<div>？

来源

2013-11-24 HorseloverFat

这是因为'div'是自然块元件和另外两个是天然的内联元件。你需要给他们所有'min-width'和'width'。 – Ally

大多数浏览器都遵循max-width，但INPUT和3210元素通常在用户代理CSS中具有默认设置的宽度。您可以添加这个CSS的一致渲染：

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

来源

2013-11-24 13:50:31 David

不需要'display：block'，看[这里]（http://jsfiddle.net/He6J5/）。 –

如果他只是放宽度和添加输入不起作用？ span，textarea，div，input { border：1px solid black; max-width：300px; height：20px; width：300px; } – Nibbler

@ShadowWizard'display：block'会导致不必要的休息。 – Ally

一个DIV - 像任何其他块元素 - 普遍采取的是可用宽度的100％。由于您将宽度（最大宽度）限制为200px，因此div的大小将为200px。内联元素是<textarea>和<input>。它们仍然有宽度，因为每个元素都有默认的宽度。

解决你的问题：如果你想<textarea>和<input>领域宽像你的DIV，你就必须改变width -attribute，而不是max-width之一。将“最大值”排除在外，将使它们同样广泛。

来源

2013-11-24 13:54:49 user2611844

使用'width'不能实现我的目标 - 我希望'input'和'textarea'元素随着屏幕宽度变窄而变窄。 – HorseloverFat

@HorseloverFat您需要编辑您的原始问题以包含该信息。 – Ally

@Ally我会说这很明显，我想要'max-width'的行为，因为问题是......'max-width'和'max-width'甚至在标题中。 – HorseloverFat

今天早上出现这个问题。虽然第一个答案涉及到我的，我觉得进一步的解释是必要的：

工作演示：jsFIDDLE Demo

1）如上所述，首先它在顶部设置投入100％的宽度是非常重要的css文件：

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

来源

2015-08-13 16:46:08 Collarbone

为什么没有<textarea>和<input>元素尊重最大宽度？

回答

相关问题