爲什麼沒有<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>元素尊重最大寬度？

回答

相關問題