Question

我喜欢将文本框对齐，以便文本框正好位于另一个文本框之下。

我有以下代码：

     <div style="text-align: left; width: 1000px"> 
     <fieldset>
       <legend>Information</legend>
       @Html.Label("Collector")
       @Html.TextBoxFor(model => model.Collector)
       <br />
       <br />
        @Html.Label("Email")
       @Html.TextBoxFor(model => model.Email)    
 </fieldset>  
 </div>

我知道使用桌子不是要走的路。还有什么其他方法可以确保文本框字段正确对齐。

Answer 1

有几种方法可以解决这个问题。你可以做一些事情：

<div style="text-align: left; width: 1000px"> 
     <fieldset>
       <legend>Information</legend>
       <div class="form-element-row">           
       @Html.Label("Collector")
       @Html.TextBoxFor(model => model.Collector)
       </div>
       <div class="form-element-row">
       @Html.Label("Email")
       @Html.TextBoxFor(model => model.Email) 
       </div>   
       </fieldset>  
</div>

在CSS文件或标题中，您可以定义form-element-row的对齐方式（以便每个form-element-row div都位于前一个之下）。您可以定义标签（由Html.Label生成的标签）和输入（由TextBoxFor生成的标签）边距和宽度，使它们通常对齐：

.form-element-row
{
    /* alignment here */
}

.form-element-row label
{
    display:inline-block;
    width:125px;
}

.form-element-row input
{
    width:350px;
}

See this jsfiddle example。我稍微修改了代码 - 我在父级div添加了一个类，所以你不必为每个子div添加一个类。

Answer 2

或者你可以使用bootstrap，纯CSS，基础等。这些将有助于获得形式等事物的一致感觉。

http://getbootstrap.com/css/#forms

您可以自定义这些框架以仅包含您想要的元素，但我通常只包括该批次。

ASP.NET MVC视图对齐文本框

2 个答案: