将CheckBox和Label放在同一行MVC上

本文介绍了将CheckBox和Label放在同一行MVC上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我已经搜索了论坛，并尝试了许多选项，但仍然无法使用。 如前所述，我正在尝试将我的标签和复选框放在同一行。

I've searched the forums and have tried many options but I still can't get this to work. As stated I'm trying to get my Label and Checkbox on the same line.

HTML

<div class="row"> <div class="col"> <div class="editor"> @Html.LabelFor(model => model.Gen_Print_Due_Before_Run) @Html.CheckBoxFor(model => model.Gen_Print_Due_Before_Run) @Html.ValidationMessageFor(model => model.Gen_Print_Due_Before_Run) </div> </div> </div>

CSS

.row { overflow: hidden; padding: 10px; } .col { float: left; width: 50% } .editor label { float: left; width: 30px; text-align: right; } .editor input[type="checkbox"] { width: 80px; margin: 0 0 0 10px; }

推荐答案

就像Paulie_D所说，浮动复选框。要么使用display：inline; 确保使用clear：both;在html下面，以确保它们不会浮动在其他任何元素的上方。

like Paulie_D said, float the check box. Either that or use display:inline; make sure to use clear:both; under the html to ensure they don't float over the top of any other elements.