HTML形成带边框的单独列

Question

我有4列,我需要将每个列与边框分开.现在看起来像:

它应该是什么(例如红/蓝颜色):

问题是我没有列的任何div,我在内部生成行,<li> </li>因此内部的4个输入<li> </li>是1行:

<form class="form-style-9">

<h2>Personal details</h2>
<ul>
<div id="personal-details">
<li>    

    <div class="test">
    <label for="Rank">Rank</label>
    <input id="Rank" type="text" name="Rank" class="field-style field-split25 align-left" placeholder="Rank" /> 
    </div>

    <div class="test">
    <label for="RankApplied">Rank Applied</label>
    <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" />   
    </div>

    <div class="test">
    <label for="Vesselstype">Vessel's type</label>
    <input id="Vesselstype" type="text" name="Vesselstype" class="field-style field-split25 align-left" placeholder="Vessel's type" />  
    </div>

    <div class="test">
    <label for="datepicker2">Date Applied</label>
    <input id="datepicker2" type="date" name="datepicker2" class="field-style field-split25-4 align-left" placeholder="Date Applied" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="fname">First Name</label>
    <input id="fname" type="text" name="fname" class="field-style field-split25 align-left" placeholder="First Name" /> 
    </div>

    <div class="test">
    <label for="nationality">Nationality</label>
    <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" />    
    </div>

    <div class="test">
    <label for="height">Height</label>
    <input id="height" type="text" name="height" class="field-style field-split25 align-left" placeholder="Height" />   
    </div>

    <div class="test">
    <label for="na">Nearest airport</label>
    <input id="na" type="text" name="na" class="field-style field-split25-4 align-left" placeholder="Nearest airport" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="sname">Surename</label>
    <input id="sname" type="text" name="sname" class="field-style field-split25 align-left" placeholder="Surename" />   
    </div>

    <div class="test">
    <label for="noc">No. of children</label>
    <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" />  
    </div>

    <div class="test">
    <label for="weight">Weight</label>
    <input id="weight" type="number" name="weight" class="field-style field-split25 align-left" placeholder="Weight" /> 
    </div>

    <div class="test4">
    <label for="languages">Languages</label>
    <input id="languages" type="text" name="languages" class="field-style field-split25-4 align-left" placeholder="Languages" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="datepicker">Date of Birth</label>
    <input id="datepicker" type="date" name="datepicker" class="field-style field-split25 align-left" placeholder="Date of Birth"  />   
    </div>

    <div class="test">
    <label for="nok">Next of kin</label>
    <input id="nok" type="text" name="nok" class="field-style field-split25 align-left" placeholder="Next of kin" />    
    </div>

    <div class="test">
    <label for="coe">Color of eyes</label>
    <input id="coe" type="text" name="coe" class="field-style field-split25 align-left" placeholder="Color of eyes" />  
    </div>

    <div class="test4">
    <label for="english">English</label>
    <input id="english" type="text" name="english" class="field-style field-split25-4 align-left" placeholder="English" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="pob">Place of Birth</label>
    <input id="pob" type="text" name="pob" class="field-style field-split25-4 align-left" placeholder="Place of Birth" />
    </div>

    <div class="test">
    <label for="nonok">Name of Next of Kin</label>
    <input id="nonok" type="text" name="nonok" class="field-style field-split25 align-left" placeholder="Name of Next of Kin" />    
    </div>

    <div class="test">
    <label for="coh">Color of hair</label>
    <input id="coh" type="text" name="coh" class="field-style field-split25 align-left" placeholder="Color of hair" />  
    </div>

    <div class="test4">
    <label for="german">German</label>
    <input id="german" type="text" name="german" class="field-style field-split25-4 align-left" placeholder="German" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="HomeAddress">Home Address</label>
    <input id="HomeAddress" type="text" name="HomeAddress" class="field-style field-split25 align-left" placeholder="Home Address" />   
    </div>

    <div class="test">
    <label for="aonok">Address of Next of Kin</label>
    <input id="aonok" type="text" name="aonok" class="field-style field-split25 align-left" placeholder="Address of Next of Kin" /> 
    </div>

    <div class="test">
    <label for="os">Overall size</label>
    <input id="os" type="text" name="os" class="field-style field-split25 align-left" placeholder="Overall size" /> 
    </div>

    <div class="test4">
    <label for="spain">Spain</label>
    <input id="spain" type="text" name="spain" class="field-style field-split25-4 align-left" placeholder="Spain" />
    </div>
</li>

<li>    
    <div class="test">
    <label for="TelNo">Telephone No.</label>
    <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." />  
    </div>

    <div class="test">
    <label for="TelNo">Telephone No.</label>
    <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." />  
    </div>

    <div class="test">
    <label for="sz">Shoe size</label>
    <input id="sz" type="text" name="sz" class="field-style field-split25 align-left" placeholder="Shoe size" />    
    </div>

    <div class="test4">
    <label for="BankDetails">Bank Details</label>
    <input id="BankDetails" type="text" name="BankDetails" class="field-style field-split25-4 align-left" placeholder="Bank Details" />
    </div>
</li>

</div>

你有什么想法我怎样才能做到这一点？这是FIDDLE