MVC 应用程序中的前端字段对齐

Question

这样我们就有了一个 ASP.NET MVC 2 应用程序。问题是，在我们的前端，很多领域并不喜欢相互配合。我想说，大约 90-95% 的字段显示给用户，我们正在使用 HTML Helpers。我们还主要使用 MVC 2 中发布的新的“for”帮助器，例如 Html.DropDownListFor

看这张图：

它们都使用上面提到的相同的 HTML Helper。这是该特定图片的代码：

    <td class="leftRightBorder">
        <%= Html.DropDownListFor(m => m.ResetDayComponent.ResetBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "ResetDayComponent.ResetBusinessDayConvention", onchange = "UpdateField(this);" })%>
    </td>
</tr>
<tr>
    <td>Frequency</td>
    <td class="leftRightBorder">
        <%= Html.DropDownListFor(m => m.FixedComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FixedComponent.PaymentFrequency",  onchange = "UpdateField(this);" })%>
    </td>
    <td />
    <td>Frequency</td>
    <td class="leftRightBorder">
        <%= Html.DropDownListFor(m => m.FloatingComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FloatingComponent.PaymentFrequency", onchange = "UpdateField(this);" })%>
    </td>

第二个频率是您看到的频率，另一个频率位于这两个下拉列表左侧的表格中。

如何为整个应用程序中的下拉菜单、文本字段等设置通用长度，以便一切看起来一致而不混乱？

Answer 1

使用 级联样式表 定义 HTML 元素的全局样式：

select, textarea, input[type=text] { width: 300px; }

或仅在 < 内设置样式代码>.leftRightBorder

.leftRightBorder select, 
.leftRightBorder textarea, 
.leftRightBorder input[type=text] 
{
    width: 300px; 
}