CSS 表单代替表格 2011

Question

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

我正在考虑重新使用 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(我的标记是网格)