请教一个多输入框表单排版的问题

[ne6rd]

我们项目主要用的 bootstrap 的 CSS ，页面上有很多查询条件表单。
bootstrap 自己的几个表单示例用起来感觉都不太合适。
请问有没有比较紧凑，整齐的表单布局的 CSS 库？谢谢。
目前这种效果，感觉有点乱

[qiayue]

你只要把条件名定长，就整齐了

[ne6rd]

@qiayue 条件名定长的话 往文字里插入    这种代码?

[qiayue]

@ne6rd 用一个 label 或 span 或 div 把条件名装起来，给这个一个 class 并设定宽度

[Anybfans]

table

[billzbc]

用 span 把条件包起来
写个类似下面的 css
span{ text-align: right; width: 80px;}

[learnshare]

表单不要横向布局， label 和 input 的总长度一般不相同，就会像你这样乱七八糟了。

可以尝试两种解决方案：
1. 纵向布局，每行一个表单， label 固定长度， input 长度也完全相同， label 文字靠右侧。表单数量多的话，分成多列（ Bootstrap 的 grid ）；
2. 表单分组摆放。拿你这个例子来说，可以在 panel 里放一个 [forms-horizontal]( http://getbootstrap.com/css/#forms-horizontal ) 。

紧凑不是首要目标，清晰高效才是。

@Anybfans table 只适合放文本元素

[Anybfans]

@learnshare 。弱弱的问。 table 放输入框有什么坏处啊。。

[boro]

放到 div 内 bootstrap 有给出样例

[ne6rd]

@qiayue IE8 里 inline 元素好像没有宽度，用 block 元素又会把 input 框挤到第二行

[ne6rd]

@billzbc span 元素设置 width 有效？

[ne6rd]

@learnshare 一行一个只适合互联网吧，我这种类似网页应用的，一个表单有 20 多个 input 的话，一整面都放不下。。。

我现在用的就是 inline-form 这种方案，但是条件名不好对齐。
忘了说，主要还是要兼容 IE8

[learnshare]

@ne6rd 什么网页都不应该乱七八糟，不是么

[ne6rd]

@learnshare 最后试了还是 table 方案比较好
1.兼容 IE8
2.代码量少，结构简单
3.比较整齐
4.在 1024-1980 宽度的屏幕上适配都不错

[yimity]

可以全角和半角空格来补齐。