Question

以下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中呈现以下内容。

enter image description here

为什么<textarea>和<input>与<div>一样宽？

Answer 1

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

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

Answer 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

Answer 3

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

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

为什么不<textarea>和＆lt; input＆gt;元素尊重max-width？</textarea>

3 个答案: