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

使用cascading style sheet为HTML元素定义全局样式：

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

或仅在.leftRightBorder

内设置样式

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