如何确保MVC在div中生成控件?

时间:2013-07-23 10:46:55

标签: css asp.net-mvc

嗨我得到了下面的部分视图,它将在div中显示控件,但是控件总是比div更长,有没有更好的方法来控制css而不是硬编码每个控件的宽度?

<fieldset  class="fieldsetthinner">
    <div style="float: left; width: 10%"><p>@Html.EditorFor(model => model.decBeginQty)<p></div>
    <div style="float: left; width: 10%"><p>@Html.EditorFor(model => model.decEndQty )<p></div>
    <div style="float: left; width: 10%"><p>@Html.EditorFor(model => model.decBeginAmt )<p></div>
    <div style="float: left; width: 10%"><p>@Html.EditorFor(model => model.decEndAmt )<p></div>

    <div style="float: left; width: 20%"><p>@Html.EditorFor(model => model.tintFactorType)<p></div>
    <div style="float: left; width: 10%"><p>@Html.EditorFor(model => model.decMaxBonus )<p></div>
    <div style="float: left; width: 10%"><p>@Html.EditorFor(model => model.nvarMsg )<p></div>
    <div style="float: left; width: 10%"><p>@Html.EditorFor(model => model.varVCode  )<p></div>
</fieldset>

提前致谢

1 个答案:

答案 0 :(得分:0)

这样的东西?

<fieldset  class="fieldsetthinner">
 <div class="editor"><p>THIS IS AN EDITOR<p></div>
 <div class="editor"><p>THIS IS AN EDITOR<p></div>
 <div class="editor"><p>THIS IS AN EDITOR<p></div>
 <div class="editor"><p>THIS IS AN EDITOR<p></div>
 <div class="editor2"><p>THIS IS AN EDITOR<p></div>
 <div class="editor"><p>THIS IS AN EDITOR<p></div>
 <div class="editor"><p>THIS IS AN EDITOR<p></div>
 <div class="editor"><p>THIS IS AN EDITOR<p></div>
</fieldset>

CSS

fieldset.fieldsetthinner
{
    background-color:gray;
}

.editor
{
  float:left;
  width:10%;
  background-color:red;
}
.editor2
{
 background-color:blue;
 float:left;
 width:20%;
}

只需在CSS中添加它即可。我添加了背景颜色来向您展示差异。你可以使用class或id,这样你就不会像你正在做的那样重复输入类似的风格。

这是工作FIDDLE