Question

我在如何垂直对齐项目中的文本框方面遇到了困难，所以我在css中做了很多更改，但仍然没有得到我想要的结果。

这是我的创建和编辑部分视图： @ Html.LabelFor（model =＆gt; model.FirstName）

   @Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.MiddleName)

@Html.EditorFor(model => model.MiddleName)
@Html.ValidationMessageFor(model => model.MiddleName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.LastName)

@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>

这是我的样式表：

 .display-label, 
 .editor-label 
 {
 margin: 1.0em 0 0 0;
 }

 .display-field
 .editor-field 
 {  
 margin-left:200px;
 float: left;
 width: 200px;

}

Output

Answer 1

如果我正确理解您的问题，您希望文本显示在一列中，输入字段显示在另一列中。全部对齐。

您可以尝试在CSS中使用此功能：

.editor-label
{
 margin: 1.0em 0 0 0;
 width: 100px;
 display:block;
}

您可以将100px更改为更小的尺寸，直到满足您的需求为止。

.editor-field
{  
 margin-left:200px;
 float: left;
 width: 200px;
}

display：block将分配空间，无论它是否有要填充的内容。然后它可以解决你的问题。

在MVC 3 Razor中垂直对齐文本框

1 个答案: