尝试平均分配div内的元素以填充

Question

之间的空间尝试生成一个表格，该表格将在div内平均分隔每条信息。

这是怎么看起来像现在，我想同样的事情的空间出来：

<section id="databox" class="databox"> 
    <div id="'+cursor.value.userName +'"><span>' + 
     cursor.value.userName + '</span> | <span>' + 
     cursor.value.fn+ '</span> | <span>'+ 
     cursor.value.ln+ '</span> | <span>'+ 
     cursor.value.pw+ '</span> | <span>'+ 
     cursor.value.em+ '</span> | <span>'+ 
     cursor.value.dob+ '</span> | <span>'+ 
     cursor.value.tel+ '</span> | <span>'+ 
     cursor.value.scl+ '</span> | <span>'+ 
     cursor.value.gender+ 
     ' <input type="button" onclick="removeobject(\'' + cursor.value.userName + '\')" value="remove"/></div>' 
</section> 

CSS：

.databox{ 
    color:white; 
    padding: 2px 10px; 
} 
#databox div{ 
    text-align: justify; 
} 
#databox div span{ 
    display: inline-block; 

} 
.databox div:nth-child(odd){ 
    padding-top: 3px; 
    padding-bottom: 3px; 
    background: rgba(255,255,255,0.1); 
    margin-bottom: 6px; 
} 
.databox div:nth-child(even){ 
    background:rgba(255,255,255,0.3); 
    padding-top: 3px; 
    padding-bottom: 3px;  
    margin-bottom: 6px; 
} 
#databox div:after{ 
    width:100%; 
    display: inline-block; 
}