如何使用 CSS 设置文本区域的宽度和高度？答案

【问题标题】：How do I set the width and height of a textarea using CSS?如何使用 CSS 设置文本区域的宽度和高度？
【发布时间】：2012-05-26 09:09:50
【问题描述】：

这是我的 CSS：

.editor-field textarea {
    width : 400;
    height : 100px;
}

这是我认为的标记：

        <div class="editor-field">
            @Html.EditorFor(model => model.Visit.BehavioralObservations)
            @Html.ValidationMessageFor(model => model.Visit.BehavioralObservations)
        </div>

这是我的模型的注释，显示了 MultilineText 属性：

    [DisplayName("Behavioral Observations")]
    [DataType(DataType.MultilineText)]
    public string BehavioralObservations { get; set; }

为什么我不能设置这个文本区域的宽度？我可以在我的 CSS 中调整高度，它看起来是正确的（使用 Chrome 开发者工具验证），但宽度没有改变。 Chrome 表示该宽度是一个无效的属性值，并且对该属性应用了删除线，并且在该属性旁边显示了一个黄色三角形。

仅供参考，这不仅限于 Chrome。 IE8 也有同样的问题。

想法？我该如何解决？谢谢！

【问题讨论】：

标签： css asp.net-mvc

【解决方案1】：

尝试使用TextAreaFor 辅助方法并设置cols 和rows html 属性

样本

@Html.TextAreaFor(model=>model.MyMultilineText, new {rows="6", cols="10"})

我希望这会有所帮助。问候。

【讨论】：

您好，您知道如何在View中将textarea的resize属性设置为false吗？

【解决方案2】：

你离开了px：

.editor-field textarea {
    width : 400px;
    height : 100px;
}

【讨论】：

你一定是在开玩笑...哇，真尴尬 :-) 谢谢！

【解决方案3】：

经过一段时间的搜索，最好的方法是使用方法TextAreaFor()

的重载之一

@Html.TextAreaFor(model => model.Visit.BehavioralObservations, 10, 40, new { HtmlAttributes = new { } })

10是行数，40是列数

【讨论】：

【解决方案4】：

代码：

@Html.TextAreaFor(m => m.Message, 30, 10, new { @class = "what" })

【讨论】：

【解决方案5】：

ASP MVC 默认项目有site.css 和 max-width:280 for textarea - 删除它并尝试这样的事情

@Html.TextAreaFor(model => model.ComicText, new { style = "width: 700px; height:150px;" })

【讨论】：

【解决方案6】：

样式可以在链接中指定

@Html.TextAreaFor(model => model.values, new {style = "width: 700px; height:200px;"})

【讨论】：