核心提示：CSS样式body,ul,li {margin:0;padding:0;}ul,li {list-style:none;}.form-table {width: 600px;height: 330px...
CSS样式
body,ul,li {
margin:0;
padding:0;
}
ul,li {
list-style:none;
}
.form-table {
width: 600px;
height: 330px;
margin:10px auto;
overflow: hidden;
padding: 0;
}
.form-table .list {
width: 100%;
height: auto;
overflow: hidden;
}
.form-table .list .item {
width: 100%;
height: auto;
margin-top: 10px;
font-size: 12px;
line-height: 40px;
overflow: hidden;
}
.form-table .list .item .name {
float: left;
width: 67px;
}
.form-table .list .item .info {
width: 100%;
height: auto;
margin-left: 67px;
}
.form-table .list .item .textarea {
position: relative;
width: auto;
}
.form-table .list .item .input {
width: 360px;
height: 40px;
line-height: 40px;
text-indent: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
}
.form-table .list .item textarea {
width: 100%;
height: 100px;
border: 1px solid #e5e5e5;
border-radius: 3px;
box-sizing: border-box;
}
HTML代码
请填写表单
- 应用名称：
爱小猫 - 个人签名：
推广计划名称" required="" type="text" /> - 个人描述：
左边的p.name要浮动，右边的p.info不设置浮动(同时不要定义width为像素或百分比，可以不定义，也可以是auto，)，
设置margin-left的值和左边p.name的宽度值一致;
box-sizing:border-box;意思让元素的大小包含边框，支持ie8+;
如果改变p.form-table的宽度时，右边的p.info元素及子元素的大小也会跟着改变；实现自适应；
效果图：
