css样式表单的代码 |css 计算宽度

form {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
label {
display: inline-block;
margin-bottom: 10px;
}
input[type=text], input[type=email] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
input[type=submit] {
background-color: #007bff;
color: #fff;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
}

这个表单样式包括以下几个部分:

• 整个表单使用了一个背景颜色为白色的背景，边框为1像素的灰色颜色，圆角为5像素。
• 每个表单元素的标签（label）使用了 inline-block 属性，使标签水平排列，然后设置了一个下边距。
• 文本输入框和电子邮件（email）输入框的宽度均为100%，具有相同的内外边距和边框风格，且下边距大于文本标签的下边距。
• 提交（submit）按钮使用了蓝色背景色、白色字体色、圆角5像素、较大的内外边距、16像素的字体大小。

借助这个简单的CSS样式表单，大家可以创建一个漂亮而且易于使用的表单。