水平布局的HTML表单

对于非常简短的表单，用户要填写的内容比较少，表单本身也不会占用太多空间，比如网站顶端的快捷登录表单，它只包含用户名、密码和登录按钮：

1. <form action="" method="post">
2.     <label>用户名: </label><input type="text" name="username" />
3.     <label>密码: </label><input type="password" name="password" />
4.     <input type="submit" value=" 登 录 " />
5. </form>

这种简短的表单，比较适合采用水平布局，让整个表单在一行内显示。由于默认情况下，表单上的所有元素都会生成一个行内级框。所以，采用水平布局时，无需对表单元素做太多的设置，只需设置文本框的宽度和边框，让它们按顺序自然排列即可。

1. input[type="text"],
2. input[type="password"] {
3.      width: 100px;
4.      border: 1px solid #ccc;
5. }

就这么简单，一个水平布局的表单就制作完成了，运行效果如图 7‑21 所示：

图7-21 水平布局的表单

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。