I want to make a form which looks like this:

         Column A      Column B
    1   Textbox AA    Textbox BB
    2   Textbox AA    Textbox BB

I've coded it like this:

                 <form id="deps" name="deps" action="" method="POST">  
    				 <ul>
    					<li>
    					<span class="er">&nbsp;</span>
    					</li> <br />
    					
    					<li>
    					<div class="field">&nbsp;</div>
    					<div class="field cv"><label for="met">A</label>  </div>
    					<div class="field cv"><label for="eng">B</label> </div>  
    					</li> <br />
    					
    					<li>
    					<div class="field head"> <label for="bd">1</label> </div>
    					<div class="field"><input type="text" name="bdmm" id="bdmm" /> <label for="bdmm">M</label> </div>
    					<div class="field"><input type="text" name="bdinch" id="bdinch" /> <label for="bdinch">I</label> </div>
    					</li> <br />
    			  
    					<li> 
    					<div class="field head"> <label for="sd">2</label> </div>
    					<div class="field"><input type="text" name="sdmm" id="sdmm" /> <label for="sdmm">M</label> </div>
    					<div class="field"><input type="text" name="sdinch" id="sdinch" /> <label for="sdinch">I</label> </div>
    					</li>  <br />
    					
    					<li> 
    					<div class="field head"><label for="tw">TW</label>  </div>
    					<div class="field"><input type="text" name="twkg" id="twkg" /> <label for="twkg">KG</label> </div> 
    					<div class="field"><input type="text" name="twlbs" id="twlbs" /> <label for="twlbs">LBS</label></div>
    					</li>  <br />
    				</ul>
    					<input type="submit" value="Calculate" onclick="getText();" />  
    			  </form> 


CSS:


    form{
    	padding:3px 0;
    	font-family: Georgia, arial, serif;
    }
    
    ul {
    	list-style: none;
    }
    
    ul li {
    	clear:both;
    	margin:0px;
    	padding:2px 0px;
    	vertical-align: middle;
    }
    
    input{  
    	font-size: 1em;
        margin: 5px;
        padding: 5px 8px;  
        border: solid 1px #E5E5E5;  
        outline: 0;  
        width: 100px; 
        }  
    
    input:focus {  
        border: solid 1px #8CDED7;  
        }  
    
    label {  
    	margin: 2px;
        padding: 2px;  
    	text-align: right;
    	font-size: 1em;	
        text-shadow: 0px 1px 0px #e5e5ee;
    	display: inline-block;
    	
        }  
    	
    label, input, h4 {
    	letter-spacing: 1.5px;
    	line-height: 20px; 
    	font-family: Georgia, 'Times New Roman';
    	text-transform: uppercase;
    }
    
    .field {
    	float: left;
    	display:inline-block;
    	width:  200px;
    	vertical-align: middle;
    }
    .head {
    	padding-top: 5px;
    }
    
    .er {
    	font-size: 1em;
    	margin-right: 10px;
        padding: 8px; 
    	background: #CC0000;
    	color: #F7F7F7;
    	float:right;
    }	
    
    .cv {
    	float: left;
    }	
    input[type=submit]{
    	margin-top: 35px;
    	padding: 9px;
    	width: auto;
    	text-align: center;
    	cursor:pointer;
    	font-family:  Georgia, arial, serif;
    	font-size: 1em;
    	color: #565463;
    	background: #8CDED7;
    	border: 2px solid #8CDED7;
    	text-shadow: 0px 1px 0px #e5e5ee;
    }

This works fine as I want: http://jsfiddle.net/4kWdQ/. But I would like to know, **if putting a div in an unordered list is good practice** or not? And anyway I can improve the CSS code?