2

我正在创建我的第一个 MVC Web 应用程序（并将我的第一个问题发布到这个论坛，阅读了数百篇文章）。我的问题是如何在没有如此冗长的代码（下图）的情况下创建表单（图片位于http://www.flickr.com/photos/82728157@N04/8194924118/in/photostream/lightbox/）。由于 MVC，模型和控制器非常简洁，但是，我认为我并不真正了解如何在视图中利用 css 和 div。我的格式要求是：1）标签和字段在同一行 2）每个字段下方的验证消息不会增加字段之间的间距，如果它显示它的消息 3）标签的最后一个字母和输入边缘之间的距离盒子是恒定的。

<div style="width: 315px; height: 300px; margin: auto auto; text-align:center">
@using (Html.BeginForm()) { 
    <div>
        <fieldset>
          <div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.LabelFor(m => m.ClientId)
          </div>
          <div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.TextBoxFor(m => m.ClientId, new { @class = "logon-field" })
         </div>
          <div style="clear:both; height:15px">
                    @Html.ValidationMessageFor(m => m.ClientId,null, new {@class="logon-validation"})
          </div>
          <div style="clear:both"></div>

          <div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.LabelFor(m => m.UserName)
          </div>
          <div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.TextBoxFor(m => m.UserName, new { @class = "logon-field" })
         </div>
          <div style="clear:both; height:15px">
                    @Html.ValidationMessageFor(m => m.UserName,null, new {@class="logon-validation"})
          </div>
          <div style="clear:both"></div>
          <div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.LabelFor(m => m.Password)
          </div>
          <div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
                    @Html.TextBoxFor(m => m.Password, new { @class = "logon-field" })
         </div>
          <div style="clear:both; height:15px">
                    @Html.ValidationMessageFor(m => m.Password,null, new {@class="logon-validation"})
          </div>
          <div style="clear:both"></div>

         <p>
             <input type="submit" style="width: 150px; font-size:large" value="Login"  />
         </p>
4

3 回答 3

0

看起来您正在使用某些应用程序自动生成 HTML。如果你自己写，对你来说会容易得多。

在这种情况下，我更喜欢使用表格，但 div 块也没有错。无论如何，我认为你的代码是不必要的复杂。

只是 CSS 工作原理的一个示例 -style="..."在您拥有的任何地方删除属性class="logon-label"并复制<style>...</style>下面的代码，它应该以完全相同的方式呈现。另一个例子在这里。

<style>
.logon-label {
  float:left; 
  width: 110px; 
  margin: 10px 0px 0px 0px;
}
</style>
...
<div class="logon-label">
  @Html.LabelFor(m => m.ClientId)
</div>
...

更多关于 CSS点击这里。

于 2012-11-18T00:44:35.570 回答
0

将内联的 CSS 定义与HTML,JS等混合起来并不是一个好方法和简单的方法。我建议您阅读一些现有的CSS frameworks. 我个人比较喜欢Twitter Bootstrap CSS Framework。它易于理解和使用。

引导链接：http:///twitter.github.com/bootstrap/。

示例（带有 的简单形式Twitter Bootstrap CSS Framework）在这里。

于 2012-11-18T00:06:37.927 回答
-1 

<style>
  .intro {
    background-color: yellow;
}
</style>
<html>
   <head>
     <body>
       <div class="intro">
       <form name="frm" action="" method="post">
         Name:<input type="text" name="name"><br>
         password:<input type="password" name="password"><br>
         <input type="submit" name="btn" value="ok"><br>
        </form>
         </div>
       </body>
     </head>
  </html>

##

于 2015-10-01T04:10:25.663 回答