html div转换表格,关于html：如何从表格切换到div以进行FORM布局？

我注意到大多数人都在谈论将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