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代码
- <div class="form-table">
- <div class="page-title">
- <h2 class="tit">请填写表单</h2>
- </div>
- <ul class="list">
- <li class="item">
- <div class="name">应用名称:</div>
- <div class="info">爱小猫</div>
- </li>
- <li class="item">
- <div class="name">个人签名:</div>
- <div class="info">
- <input type="text" name="projectName" placeholder="推广计划名称" required />
- </div>
- </li>
- <li class="item">
- <div class="name">个人描述:</div>
- <div class="info textarea">
- <textarea name="productDes" id="productDes" placeholder="个人描述" required></textarea>
- </div>
- </li>
- </ul>
- </div>
左边的div.name要浮动,右边的div.info不设置浮动(同时不要定义width为像素或百分比,可以不定义,也可以是auto,),
设置margin-left的值和左边div.name的宽度值一致;
如果把textarea改成DIV元素的话,如果你不设置margin-left的话,也可以自适应,如果给div.info添加一个背景色,它(div.info)会占和父元素一样的宽度,这样会带来一个问题,如果给div.info添加一个边框的话,那么div.info的边框会占满占个父元素的宽度。
box-sizing:border-box;意思让元素的大小包含边框,支持ie8+;
如果改变div.form-table的宽度时,右边的div.info元素及子元素的大小也会跟着改变;实现自适应;
效果图: