【发布时间】：2009-04-10 00:23:24
【问题描述】：
我需要为数据输入构建一个表单，比如 FirstName 和 LastName。我知道如何用桌子做到这一点。在第一个<td> 中，我放置了一个标签标签，在第二个中，我使用了一个带有type="text" 属性的输入标签。这样标签和文本框就会排成两列。
有没有办法用 CSS 做到这一点？
【问题讨论】：
【发布时间】：2009-04-10 00:23:24
【问题描述】：
【讨论】：
-
注意 - 该教程在 HTML 中有 BR 标签，这不好
-
@OlegMikheev 您可以将表格的每一行放在
<div></div>中以避免使用<br/>。
您不需要表格来制作出色的 HTML 表单。事实上，你不想要它们！在家里试试这个代码，看看你的想法。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact info</title>
<LINK href="main2.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<style>
fieldset.nested
{
position: relative;
margin-top: 15px;
}
fieldset.nested legend
{
position: absolute; top: -8px; left: 1em;
}
</style>
<![endif]-->
</head>
<body>
<div>
<form>
<fieldset class="main">
<legend>Contact info</legend>
<fieldset class="nested">
<legend>Name</legend>
<ol>
<li>
<label for="textboxName">Name</label>
<input id="textboxName" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxName" >Title</label>
<input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCompany">Company</label>
<input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Address</legend>
<ol>
<li>
<label for="textboxAddress1" >Street address</label>
<input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxAddress2" >Street address</label>
<input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCity" >City</label>
<input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxRegion" >City/Region</label>
<input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxPostalCode" >Postal code</label>
<input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/>
</li>
<li>
<label for="textboxCountry" >Country</label>
<input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<fieldset class="nested">
<legend>Phone numbers</legend>
<ol>
<li style="display:none">
<label for="textboxName" >Name</label>
<input id="text1" name="textboxName" type="text" style="width: 15em;"/>
</li>
<li style="display:none">
<label for="textboxAddress1" >Address</label>
<input id="text2" name="textboxAddress1" type="text" style="width: 15em;" />
</li>
<li>
<label for="textboxAddress2" >Phone</label>
<input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/>
</li>
</ol>
</fieldset>
<div class="buttonsContainer">
<input class="button" type="submit" value="OK" />
<input class="button" type="button" value="Cancel" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
CSS：
body
{
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
fieldset.main
{
margin: 1.5em 0 0 1.5em;
padding: 1em 0 0 0;
width: 400px;
font-size: .9em;
}
fieldset.main legend
{
margin-left: 1em;
color: #000000;
font-weight: bold;
}
fieldset.main ol
{
padding: 1em 1em 0 1em;
list-style: none;
}
fieldset.main li
{
padding-bottom: .5em;
}
fieldset.main ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
fieldset.nested
{
margin: 0 0 1em 1em;
padding: 0;
width: 93%;
font-size: .8em;
border: 1px solid gray;
background: #B0C4DE;
}
fieldset.nested legend
{
margin-left: 1em;
font-weight: normal;
font-size: .9em;
color: black;
background-color: white;
padding: 0 1em 0 1em;
border: 1px solid black;
}
fieldset.nested ol
{
padding: 0 1em 0 1em;
list-style: none;
}
fieldset.nested li
{
/* Control leading between rows. */
padding-bottom: .7em;
}
fieldset.nested ol li label
{
float: left;
width: 10em;
margin-right: 1em;
}
/* ----------------------------------------- */
input.button
{
/* border-style: none; */
width: 6em;
height: 2.5em;
}
div.buttonsContainer
{
float: right;
margin: 1em 1em 1em 0;
}
【讨论】：
-
+1 - BAM！正是我想要的。有人能解释一下 IE 特定样式的重要性，以及为什么它们是 IE 特定的吗？
CSS 可以正常工作——如果您可以输入像素宽度，但遗憾的是当您需要本地化字符串并发现标签不合适时会失败。对于地址输入表单，我会坚持使用表格，因为它们可以正确调整大小和包装行为，并且几乎在所有浏览器上都可以正常工作。
编辑：我有点想知道是否有任何反对者检查了这些 S.O. 的布局。页面
【讨论】：
-
有点，我同意。 CSS在理论上很好，如果它运行良好会很棒，但每次我尝试将它用于布局时，我都会花费数小时测试和调试来完成我可以在几分钟内完成的表格。然后，一旦我让它工作，它在另一个浏览器中看起来就不正确了！
-
我打赌你们也喜欢在穿孔卡片上编码！
-
也许你只是需要更多的 CSS 练习。此外，拥有屏幕阅读器之类的人肯定会讨厌你。
-
表格当然有合法用途。它们被过度使用了一段时间，对它们的强烈反对有时会有点过热。如果他们做你想做的事，请使用它们。但在一个完美的世界中，您将了解解决方案并在您的特定环境中权衡每个解决方案的成本和收益。
自己做这件事的一个非常好的方法是在 firefox 上安装 firebug 并检查网站上实现这一点的元素。
有一个很棒的smashing maagzine on sign up forms。可以看到 CSS 中的几种方法，其中有一些非常棒的示例。
【讨论】：