CSS左侧固定宽 右侧自适应(兼容所有浏览器)

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的宽度值一致;
box-sizing:border-box;意思让元素的大小包含边框，支持ie8+;

如果改变div.form-table的宽度时，右边的div.info元素及子元素的大小也会跟着改变；实现自适应；

效果图：