我注意到大多数人都在谈论将DIV和CSS用于
标签,文本框对。 一个人将如何转换一个表,例如:
...
从使用表到使用CSS表示div,示例将很有帮助! 目前,我正在使用一个表格来处理这样的事情,想象一下一个仅显示一些用户信息的网站。 如何使用DIV(而不是表格格式)显示对(标签,文本框)?
假设标签/文本框是ASP.net标签和文本框。
考虑一下Woork上的这篇标题为Clean and Pure CSS Form Design的文章。
我已经实现了这种样式,包括fieldset,并针对所需的外观适当调整了所有样式。
考虑使用而不是asp:label通过CSS继承标签的样式。或者,您可以将asp:label放在label标记内。由于asp:label发出,因此将仅产生一组。
@pcampbell,我最感兴趣的是每个粗体标签下面的"添加您的姓名","添加有效地址"等。 您可以共享此表单的CSS和HTML吗?
没关系,刚注意到这篇文章...谢谢
如果要在标记中使用标记,请考虑使用代替。 产生的标记将没有标记:)
仅供参考,在此答案发出后的3年内,只要设置了" AssociatedControlID"属性,就不要渲染。
@ p.campbell,今天早上才有时间添加示例。
很好的答案,链接" Clean and Pure CSS Form Design"不可用,但是找到了此实现链接
考虑这篇标题为"使用CssDrive中的CSS的无表表单"的文章。
一点点样式确实有帮助。我一直在用上面文章中的模式重构/替换所有表格形式的表格。
使用以下代码:
asp:textbox完美运行,不需要修改各种文本框
asp:button完美工作,无需修改
asp:checkbox可能需要修改,也许以特殊样式包装在另一个div中
这是介绍的基本示例:
CSS:
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
HTML:
Name
Email Address:
Comments:
Agree to Terms?
我使用基本上相同的想法来创建无表表单布局。但是,我使用无序列表来保存标签和输入。例如:
Name
Email Address:
Comments:
Agree to Terms?
CSS样式可以与pcampbell在其示例中使用的样式相同。我的唯一区别是为UL添加了一种样式,例如:
ul {list-style: none; margin: 0; padding: 0;}
从我的代码中提取:
Password:
Confirmation:
Prénom:
Nom:
与以下CSS:
label {
float:left;
margin-right:0.5em;
margin-top:10px;
padding-left:5px;
text-align:justify;
width:200px;
}
input[type="text"], textarea, input[type="password"], input[type="checkbox"], select {
float:left;
margin-right:10px;
margin-top:5px;
}
.clear {
clear:both;
}
基于@ p.cambell答案和CSS的实现,我在asp.net中为登录弹出屏幕编写了以下代码:
的CSS
.flotante-login {
border:solid 2px #b7ddf2;
border-radius: 5px;
padding: 15px;
background:#ebf4fb;
}
.loginBox {
margin: 0 auto;
width: 400px;
padding: 10px;
}
#login{
}
#login h1 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
#login p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#login label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#login .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#login input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#login a{
clear:both;
width:125px;
padding: 10px;
background-color: #E2B66B;
color:#FFFFFF;
text-align:center;
text-decoration: none !important;
line-height:30px;
font-weight:bold;
color: #FFF !important;
border-radius: 5px;
}
aspx页面:
Acceso
Usuario:
Ingresa tu email
Contrase?a:
Ingresa tu contrase?a
结果是:
您的登录屏幕的行为类似于模式窗口吗?
@DanielV是的,这是一个弹出模式窗口,如果您想知道,我会使用jquery blockui