asp.net-mvc 如何改变 Html.TextBox 的宽度答案

【问题标题】：asp.net-mvc How to change width Html.TextBoxasp.net-mvc 如何改变 Html.TextBox 的宽度
【发布时间】：2010-11-07 00:24:27
【问题描述】：

如何在 asp.net-mvc 视图中更改文本框的宽度

我希望这些字段并排放置，并且状态文本框的宽度要短得多

            <p>
                <label for="city">City:</label>
                <%= Html.TextBox("city")%>
                <label for="state">State:</label>
                <%= Html.TextBox("state")%>
            </p>

编辑：

以下答案似乎都不适合我。我注意到在 site.css 我看到了这个：

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset label 
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

如何为一个字段（文本框）覆盖此行为

【问题讨论】：

内联样式将允许您覆盖 css 类中的样式。当您尝试为特定的 html 元素指定一次性样式时，内联样式是完美的。诀窍是记住将它们传播回 css 类，如果它们在整个 html 中变得很常见并且不再是“一次性的”。例如，如果您所有的文本框都需要 300 像素宽，那么只需更改 css 类。

标签： asp.net-mvc textbox

【解决方案1】：

我会使用带有 HTML 属性的辅助签名并为其分配一个 CSS 类。然后，您将使用 CSS 来实现所需的外观。

 <%= Html.TextBox( "state", null, new { @class = "small-input" } ) %>

【讨论】：

请注意，“@class”需要@（文字）符号，因为class是保留字。
@mgroves，绝对正确。感谢您的澄清。另外，请注意，我使用 null 作为默认值。这将保持默认值（来自 Model 或 ViewData）的行为与没有额外参数的版本具有相同的行为。
这似乎没有任何作用。是因为我周围有
请查看更新后的问题。看起来其他一些 CSS 覆盖了上面的答案。我怎样才能覆盖这个CSS？
添加类似 input[type=text] .small-input { width: 50px; } 在 site.css 中的 input[type=text] 行之后。

【解决方案2】：

<%= Html.TextBox("state", null, new { @style = "width: 300px;" })%>

【讨论】：

但是，如果您想快速设置宽度，作为一次性设置，这将起作用。我还认为在很多地方使用内联样式是完全可以接受的。但我也理解你对内联样式的反对。
内联解决方案似乎是唯一胜过这个外部 css 的东西

【解决方案3】：

css

.yourcssclassname{width:50px;}

html

<%= Html.TextBox("city", null, new{@class="yourcssclassname"})%>

应该这样做...您显然也可以发送样式属性，但 css 类是更好的选择路径。

string.Empty 表示默认值。

编辑：参见 tvanfosson 的帖子

固定答案，因此它解决了 cmets 中提到的问题。

【讨论】：

如果您使用 null 而不是 string.Empty，它将从 Model 或 ViewData 中提取默认值（如果可用）。
不应该是：而不是：
感谢小费 tvanfosson 我不知道！您对 css 类名“me”中的错字是正确的 :-)

【解决方案4】：

您可以使用 TextBox 帮助器将任意属性添加到您的文本框。例如：


<%= Html.TextBox( "state", null, new { size = "10" } ) %>

将呈现如下内容：


<input type="text" name="state" size="10" />

【讨论】：

这对我不起作用。它对其他人有用吗？ IE 似乎忽略了该设置。
好吧，它是在服务器端呈现的，所以你使用什么浏览器并不重要。

【解决方案5】：

如果使用 VS 附带的默认 MVC 模板。在文本框的 html 属性中明确指定一个类似乎不会覆盖 Site.css，但是，内联样式确实有效。所以：

{@style= "width: 400px;"}

会起作用，而这不会：

{@class="myclass"}

【讨论】：