本文探讨了如何对表单元素进行样式设计，特别是针对单选框、复选框和select元素。当需要复杂样式时，建议使用额外的标签并调整父元素样式，如将单元框透明度设为0。对于select，可以通过利用框架组件实现复杂样式。同时，解释了行内元素、内联块元素和块元素的布局特点，并推荐使用'display: inline-block'进行左右布局。
- 表单元素的样式
表单元素中除了可以设置简单的尺寸大小的样式 文本框类的元素可以设置边框等简单的样式修饰外 是做不了更复杂的，所以单复选框 单选框 需要复杂样式修饰的时候 需要借助其他标签来实现.
实现的办法可以是在元素外层加上一个标签然后调整父元素的样式 将单元框或者复选框的透明度设置成0
select只能设置宽高 边框等样式 所以想做复杂样式 可借助框架中提供的组件的样式
行内元素 内联元素 占的位置 是根据里面的内容决定的 样式表设置宽高是无效的
块元素 会独自占掉一横行的空间
内联块 可以用样式表修饰 宽高 占掉的空间 就是样式表写的大小
display: inline-block:设置内联块,可以给元素写高度 ,在对外边距没那么严格的时候, 多数左右布局都可选择;
标签:只有两种标签;
第一种是块元素
第二种是 内联元素(行内)宽高修饰全无效
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.label{
width: 65px;
display: inline-block;/*设置内联块*/
}
.form-group .use,.xin ,.sheng, .yang{
margin-bottom: 10px;
}
.xin{
}
.yang .ma{
width: 50px;
height: 16px;
text-align: center;
}
.bei .label{
vertical-align:top ; /* 顶上对齐 即让备注放
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
