同一行上的标签和文本框+整个宽度上的文本框

问题描述：

默认情况下，在ASP.NET MVC中，当系统生成视图（脚手架）时，我们在一行上有标签，在下一行上有文本框。我希望将标签和文本框放在同一行上，并在整个宽度上具有文本框（100％）。我试图做到这一点，但没有成功。同一行上的标签和文本框+整个宽度上的文本框

我发现了一些类似的帖子，但不允许我在整个宽度上有文本框！

下面是我想：

enter image description here

所以，在默认情况下，我有：

<div class="editor-label"> @Html.LabelFor(model => model.Descr) </div> 
<div class="editor-field"> @Html.EditorFor(model => model.Descr) </div> 

<div class="editor-label"> @Html.LabelFor(model => model.Year) </div> 
<div class="editor-field"> @Html.EditorFor(model => model.Year) </div>

任何想法？

答

这是一个纯粹的HTML/CSS问题，与ASP.NET MVC无关。我建议你使用following article来创建漂亮的HTML表单。

所以在你的情况下，你可以float: left标签，并将其定义为固定宽度。正如this live demo说明我为你写：

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

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

.editor-field input { 
    width: 100%;  
}

答

的另一种方式，你可以自定义类，改变使用表

我宁可不推荐使用表格非表格元素的位置。 CSS是正确的解决方案。 –

不同意，表是一个基本的布局机制，很适合这个问题，恕我直言。上面给标签指定固定宽度的建议会导致页面在某些屏幕/浏览器上无法正常显示的可能性。一个表让列宽根据实际内容自定义，在这种情况下是恒定的。 –

答

This is the correct answer:both label and textboxes are in the same line 

.editor-label{ 
    float: left; 
    width: 100%; 
    margin-bottom:-20px; 
} 

.editor-field 
{ 
    margin-left: 120px; 
    margin-bottom:-5px; 

} 
.display-label { 
    float: left; 
    padding: 0; 
    width: 160px; 
}

同一行上的标签和文本框+整个宽度上的文本框

相关推荐