同一行上的標籤和文本框+整個寬度上的文本框

默認情況下，在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>

任何想法？

來源

2011-10-22 Bronzato

這是一個純粹的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%;  
}

來源

2011-10-22 09:30:30

-2

的另一種方式，你可以自定義類，改變使用表

來源

2011-10-22 12:42:27 TPL

我寧可不推薦使用表格非表格元素的位置。 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; 
}

來源

2016-10-27 19:51:32

同一行上的標籤和文本框+整個寬度上的文本框

回答

相關問題