缩短我的 Html 助手 CSS 样式答案

【问题标题】：Shortening my Html helper CSS styling缩短我的 Html 助手 CSS 样式
【发布时间】：2012-11-17 23:56:54
【问题描述】：

我正在创建我的第一个 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>

【问题讨论】：

标签： html css helpers

【解决方案1】：

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

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

示例（Twitter Bootstrap CSS Framework 的简单形式）here。

【讨论】：

Salih，也感谢您抽出宝贵时间回答。听起来我将内联 CSS 与类派生 CSS 混合的方式不是很好的形式。我这样做是因为 textboxfor 不会将 CSS 类作为参数。通过将其包装在具有类的 div 中......文本框继承了它。鉴于到目前为止的学习曲线有多陡峭......我认为我还没有学习另一个框架的游戏（或者我应该）？
你好；不客气。是的，我认为你绝对应该学习一些 CSS 框架；它会让你的生活更轻松（它确实是我的）。 Twitter Bootstrap 有很好的文档。使用 CSS 框架最好的部分是它已经被设置为可以在许多不同的平台上工作（移动设备、IE、Firefox 等）。成千上万的用户正在报告问题；参与改进等...现在，如果您发现我的回答有用，请考虑将其标记为可以使用，以便其他用户可以更轻松地找到它。 :-) 谢谢。
开始的好地方：twitter.github.com/bootstrap/getting-started.html#examples（很少有完整的模板）。这取决于你的 CSS 知识（我在开始使用 Twitter Bootstrap 时是……平均水平）；我花了 30 分钟才弄清楚 :-) 只需阅读提供的文档即可。我也尝试过 Blueprint CSS、jQuery UI 等。它们都很好。您可以在线搜索 CSS 评论。我喜欢这个 :-) 节省时间...

【解决方案2】：

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

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

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

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

更多关于 CSS click here.

【讨论】：

Erik，感谢您的快速回复 :) 实际上，在阅读 CSS 教程后，我以新手的方式亲手编写了上述所有代码。我尝试了您作为我的第一个想法发布的更简单的想法......但是，为了让所有内容正确对齐，我似乎需要一个固定宽度的左浮动 div 并且在其中有一个右浮动标签。我只是不知道如何更有说服力地做到这一点。
jsbin.com/inihor/1/edit 在这里，享受吧。抱歉，我以为您正在使用应用程序编写代码，但是人工编写看起来非常复杂。 :)
埃里克，再次感谢您花时间回答。知道对于像你这样有经验的程序员来说，即使是一个简单的登录框仍然需要很多行来布局，我肯定会感觉更好。我将尝试将我的内联样式代码移动到 CSS 样式表中，看看是否可以让我的模型绑定字段的格式正确。我第一次失败了，这就是为什么我像以前一样将它们包裹在 div 中。再次感谢:)

【解决方案3】：

<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>

【讨论】：