揭秘CSS(第 1 版)
7.2.2 水平布局的表单
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

表格

表单

表单元素的样式

水平布局的表单

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

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

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

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

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

水平布局的表单
图7-21 水平布局的表单

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验