CSS 表单代替表格 2011

Question

当我遇到诸如需要 3 个彼此相邻的文本框（如电话号码）或文本框旁边的下拉列表之类的障碍时，我放弃了使用 CSS 进行表单样式设置。如果没有好的表格，我就无法想出一种可靠的方式来设计它。

我正在考虑重新使用 CSS 来设置表单样式；我不知道：

1. 将标题放在字段顶部还是左侧更有用。
2. 如何设计事物的样式，以便即使有几个相邻的表单元素也能很好地放置。

参考？这仍然是一个白日梦吗？

Answer 1

你的意思是这样吗？

基本上我们创建一个伪表

.mxrow {
clear: both;
width: 100%;
height: 50px;
}


.mxcell {
float: left;
padding-top: 10px;
padding-bottom: 10px;
height: 26px;
}

.mxcell_firstcell{
width: 25%;
}

并且标记将是

<div class = "mxrow">
  <div class = "mxcell mxcell_firstcell"><input element /></div>
  <div class = "mxcell mxcell_secondcell"><another form element/></div>
</div>

各个单元格类名用于应用特定的CSS（我的标记是网格）

Answer 2

有几个专门为布局表单而设计的 CSS 模板。

• vessess.com
• Uniform

我希望这可以帮助您指明一个富有成效且令人敬畏的方向。小心。

Answer 3

不，这是很有可能的，而且我（和许多其他人）多年来一直这样做。

查看float: (left|right) 和display: (inline|inline-block)。

Answer 4

其他人给了你一些有效的建议...如果你仍然有问题，你可以尝试像 formee 这样的表单 CSS 框架... http ://www.formee.org/