css两列表单效果实现

  <form id="form1" name="form1" method="post" action="">
    <label><span>应聘职位：</span><select class="inputlength"  name="应聘职位">
      <option value="1" selected>测试</option>
      <option value="2">测试</option>
      <option value="3">测试</option>
      <option value="4">测试测试</option>
 </select>*</label>
     
  
   <label><span>性别：</span>
       
          <input  type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />
          男
    
       
          <input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />
          女
        </label>
     
   <label><span>姓名：</span>
          <input  class="inputlength" type="text" name="textfield" id="textfield" />*</label>
     
 
  
     <label>
     <span>婚姻状况：</span>
    
        <input type="radio" name="RadioGroup2" value="单选" id="RadioGroup2_0" />
        未婚
   
  
        <input type="radio" name="RadioGroup2" value="单选" id="RadioGroup2_1" />
        已婚

  </label>
     
   <label>
   <span>出生日期：</span>
      <input  class="inputlength" type="text" name="textfield2" id="textfield2" />
   </label>
  
   <label>
      <span>毕业日期：</span>
      <input class="inputlength"  type="text" name="textfield3" id="textfield3" />
      </label>
 
 
   <label>
      <span>毕业院校：</span>
      <input class="inputlength" type="text" name="textfield4" id="textfield4" />
   </label>

   
   <label>
      <span>所学专业：</span>
    <input  class="inputlength" type="text" name="textfield5" id="textfield5" />
   </label>

      <label>
      <span>学历：</span>
      <input  class="inputlength" type="text" name="textfield6" id="textfield6" />
   </label>

   <label>
     <span>电子邮箱：</span>
    <input  class="inputlength" type="text" name="textfield7" id="textfield7" />
      </label>

 

    <label>
     <span>联系电话：</span>
      <input class="inputlength"  type="text" name="textfield8" id="textfield8" />*

   </label>

    <label>
     <span>地址：</span>
    <input  class="inputlength" type="text" name="textfield9" id="textfield9" />
  </label>

 
    <div class="textarealength">
     <span>个人特长：</span>
      <textarea   class="inputlength2" name="textarea" id="textarea" cols="45" rows="5"></textarea>
  
    </div>
     <div class="textarealength">
     <span>个人简介：</span>
      <textarea  class="inputlength2"  name="textarea2" id="textarea2" cols="45" rows="5"></textarea>
    *</div>
 <div class="centersubmit">
      注意：带*为必填项

 </div>
    <div class="centersubmit">
      <input type="submit" name="button" id="button" value="提交" />
      <input type="reset" name="button2" id="button2" value="重置" />
 </div>
 
  </form>

#humanresourcesform{
 
 
 float:left;

 width:400px;
 padding:10px;
 margin-bottom:15px;
 background:#f7f5f2;
 color:#7f7569;
 line-height:25px;
 
 
}

#humanresourcesform .inputlength{

 width:100px;
 
 
}
#humanresourcesform .inputlength2{

 width:300px;
 margin-top:5px;
 
}
#humanresourcesform label{
    display:block;
 float:left;
 width:200px;
 
 
}

#humanresourcesform span{
    display:block;
 float:left;
 width:70px;
 text-align:right;
 
 overflow:hidden;
 
 
}
#humanresourcesform select{
 display:block;
 float:left;
 
 
 
}
#humanresourcesform .textarealength{
 width:400px;
 
 
 
}

#humanresourcesform .centersubmit{
 width:120px;
 margin:0px auto;
 
 
 
}

转载于:https://www.cnblogs.com/nidilzhang/archive/2009/09/23/1572317.html