尝试在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; 
}

Answer 1

如果你对丑陋的解决方案持开放态度，那么这里就是一个：

http://jsfiddle.net/KBZg3/

利用text-align: justify