缩短我的HTML Helper CSS样式
[英]Shortening my Html helper CSS styling
问题描述
我正在创建我的第一个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>
3 个解决方案
解决方案1
0 2012-11-18 00:06:37
将CSS定义与HTML ， JS等内联在一起并不是一种好方法。 我建议您阅读一些现有的CSS frameworks 。 我个人更喜欢Twitter Bootstrap CSS Framework 。 它很容易理解和使用。
引导程序链接： http：///twitter.github.com/bootstrap/ 。
示例（ 这里是 Twitter Bootstrap CSS Framework简单形式）。
解决方案2
0 2012-11-18 00:44:35
看起来您正在使用一些自动生成HTML的应用程序。 如果您自己编写，那么对您来说会容易得多。
在这种情况下，我宁愿使用表，但div块也没有错。 无论如何，我认为您的代码不必要复杂。
只是一个CSS如何工作的示例-在所有具有class="logon-label"地方删除style="..."属性，并复制下面的<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的更多信息， 请单击此处 。
解决方案3
-1 2015-10-01 04:10:25
<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>
##
CSS不是我的HTML样式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.