Html 如何从表格切换到 div 以进行 FORM 布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1760820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to switch from table to div for FORM layout?
提问by JonH
I'm noticing most folks are talking about using DIVs and CSS for label, textbox pairs. How would one convert a table such as:
我注意到大多数人都在谈论将 DIV 和 CSS 用于标签、文本框对。如何转换表格，例如：
<table>
<tr>
<td><some Label1> </td>
<td><some TextBox1> </td>
</tr>
<tr>
<td><some Label2> </td>
<td><some TextBox2> </td>
</tr>
...
</table>
From using a table into say a div with CSS, a sample would be helpful! Currently I was using a table for such a thing, imagine say a site that just displays some user information. How would I display the pairs (the label, the text box) using DIVs rather than table format?
从使用表格到使用 CSS 的 div，示例会有所帮助！目前我正在使用一个表格来做这样的事情，想象一下一个只显示一些用户信息的网站。我将如何使用 DIV 而不是表格格式显示对（标签、文本框）？
Assume the labels / textbox's are ASP.net labels and textboxes.
假设标签/文本框是 ASP.net 标签和文本框。
回答by p.campbell
Consider this article at Woork titled Clean and Pure CSS Form Design
考虑一下 Woork 上的这篇名为Clean and Pure CSS Form Design 的文章
I've implemented this style, including the fieldsetand tweaked all the styles appropriately for the look/feel that was required.
我已经实现了这种样式，包括fieldset并根据所需的外观/感觉适当地调整了所有样式。
Consider using <label runat="server">to inherit the style of the label via CSS instead of asp:label. Alternatively you could put your asp:labelwithin labeltags. Since asp:labelemits <span>, that would simply result in a set of <label><span></span></label>.
考虑使用<label runat="server">通过 CSS 而不是asp:label. 或者你可以把你asp:label的label标签放在里面。由于asp:label发出<span>，那只会导致一组<label><span></span></label>.
回答by p.campbell
Consider this article titled Tableless forms using CSSfrom CssDrive.
考虑这篇题为使用来自 CssDrive 的CSS 的无表格表单的文章。
A little bit of style really helps. I've been refactoring/replacing all my table'd forms with the pattern found in the article above.
一点点风格真的很有帮助。我一直在用上面文章中的模式重构/替换我所有的表格形式。
With the following code:
使用以下代码：
- asp:textbox works perfectly, needs no modification for all kinds of textboxes
- asp:button works perfectly, needs no modification
- asp:checkbox would likely need modification, perhaps wrapped in another div with a special style
- asp:textbox 完美运行，无需修改各种文本框
- asp:button 完美运行，无需修改
- asp:checkbox 可能需要修改，可能包含在另一个具有特殊样式的 div 中
Here's the basic example presented:
这是提供的基本示例：
The CSS:
CSS：
<style type="text/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;
}
</style>
The HTML:
HTML：
<form>
<label for="user">Name</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
回答by Gregtheitroade
Extract from my code:
从我的代码中提取：
<div>
<label for="Password"> Password:</label>
<input id="Password" type="password" name="Password"/>
<label for="ConfirmationPassword"> Confirmation: </label>
<input id="ConfirmationPassword" type="password" name="ConfirmationPassword"/>
<div class="clear"/>
</div>
<div>
<label for="FirstName"> Prénom:</label>
<input id="FirstName" type="text" value="" name="FirstName"/>
<label for="LastName"> Nom:</label>
<input id="LastName" type="text" value="" name="LastName"/>
<div class="clear"/>
</div>
</div>
with the following css:
使用以下 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;
}
回答by Chris
I've used basically the same idea for creating a tableless form layout. But, I use an unordered list to hold my labels and inputs. For example:
我已经使用基本相同的想法来创建无表表单布局。但是，我使用无序列表来保存我的标签和输入。例如：
<form>
<fieldset>
<ul class="formFields">
<li>
<label for="user">
Name</label><input type="text" name="user" value="" /></li>
<li>
<label for="emailaddress">
Email Address:</label><input type="text" name="emailaddress" value="" /></li>
<li>
<label for="comments">
Comments:</label><textarea name="comments"></textarea></li>
<li>
<label for="terms">
Agree to Terms?</label><input type="checkbox" name="terms" class="boxes" /></li>
</ul>
<p>
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" /></p>
</fieldset>
</form>
The CSS styles can be just the same as what pcampbell has used in his example. The only difference for mine would be the addition of a style for the UL such as:
CSS 样式可以与 pcampbell 在他的示例中使用的样式相同。我的唯一区别是为 UL 添加了一种样式，例如：
ul {list-style: none; margin: 0; padding: 0;}
回答by Juanito
Based on @p.cambell answerand the implementation with css, I wrote this code in asp.net for a login popup screen:
基于@p.cambell 的回答和css 的实现，我在 asp.net 中为登录弹出屏幕编写了这段代码：
css
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 page:
aspx页面：
<div id="popupLogin" class="flotante-login" style="display:none;">
<asp:Panel ID="panelLogin" runat="server" DefaultButton="lbLogin">
<div id="login" class="loginBox">
<h1>Acceso</h1>
<label>
Usuario:
<span class="small">Ingresa tu email</span>
</label>
<asp:TextBox ID="txtUsuario" runat="server" MaxLength="250"></asp:TextBox>
<label>
Contrase?a:
<span class="small">Ingresa tu contrase?a</span>
</label>
<asp:TextBox ID="txtPassword" runat="server" MaxLength="8" TextMode="Password"></asp:TextBox>
<asp:LinkButton ID="lbLogin" Text="Ingresa" runat="server"></asp:LinkButton>
<div class="spacer"></div>
</div>
</asp:Panel>
</div>
The resultis:
该结果是：
