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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3363 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

Bootstrap

CSS

表单

框表单

14 条回复 • 2015-09-11 18:41:54 +08:00

qiayue

2015-09-10 15:13:05 +08:00

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

ne6rd

2015-09-10 15:14:28 +08:00

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

qiayue

2015-09-10 15:30:25 +08:00

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

Anybfans

2015-09-10 15:32:59 +08:00

table

billzbc

2015-09-10 15:58:55 +08:00

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

learnshare

2015-09-10 15:59:23 +08:00

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

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

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

@Anybfans table 只适合放文本元素

Anybfans

2015-09-10 16:04:54 +08:00

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

boro

2015-09-10 16:06:19 +08:00 via iPhone

放到 div 内 bootstrap 有给出样例

ne6rd

2015-09-11 09:19:30 +08:00

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

ne6rd

2015-09-11 09:22:17 +08:00

@billzbc span 元素设置 width 有效？

ne6rd

2015-09-11 09:27:18 +08:00

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

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

learnshare

2015-09-11 09:53:16 +08:00

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

ne6rd

2015-09-11 10:12:11 +08:00

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

)

yimity

2015-09-11 18:41:54 +08:00 via Android

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